[英]Adjusting the brightness of an image using canvas context in Microsoft Edge
[英]How to adjust the image brightness in the edge browser
我有一個應用程序並使用以下代碼來調整圖像亮度,它適用於 Chrome、FireFox 和基於 Chromium 的 Edge 版本,但是,它不適用於 EdgeHTML 版本的 Edge。
function takepicture() {
var context = canvas.getContext('2d');
var b = document.getElementById('txtBrightness').value;
if (width && height) {
canvas.width = width;
canvas.height = height;
context.filter = 'brightness(' + b + '%)';
context.drawImage(video, 0, 0, width, height);
var data = canvas.toDataURL();
//alert(data);
document.getElementById('Image').value = data;
//$("#Image").val(data);
$("#form1").submit();
} else {
clearimage();
}
}
從這個鏈接,我知道過濾方法不支持 EdgeHtml 版本的 Edge。 是否有使上下文過濾器與 EdgeHTML 版本的 Edge 瀏覽器一起使用的解決方法?
您可以嘗試使用 Konva 插件將濾鏡應用於圖像。
示例代碼如下(將圖像路徑更改為您擁有的,我使用的是 Microsoft Edge 44.18362.449.0):
<head>
<meta charset="utf-8" />
<title></title>
<script src="https://unpkg.com/konva@4.1.3/konva.min.js"></script>
<meta charset="utf-8" />
<title>Konva Brighten Image Demo</title>
<style>
body {
margin: 0;
padding: 0;
overflow: hidden;
background-color: #f0f0f0;
}
#slider {
position: absolute;
top: 20px;
left: 20px;
}
</style>
</head>
<body>
<div id="container"></div><br />
<input id="slider" type="range" min="-1" max="1" step="0.05" value="0" /><br />
<script>
function loadImages(sources, callback) {
var images = {};
var loadedImages = 0;
var numImages = 0;
for (var src in sources) {
numImages++;
}
for (var src in sources) {
images[src] = new Image();
images[src].onload = function () {
if (++loadedImages >= numImages) {
callback(images);
}
};
images[src].src = sources[src];
}
}
function buildStage(images) {
var stage = new Konva.Stage({
container: 'container',
width: window.innerWidth,
height: window.innerHeight
});
var layer = new Konva.Layer();
var lion = new Konva.Image({
image: images.lion,
x: 80,
y: 30,
draggable: true
});
lion.cache();
lion.filters([Konva.Filters.Brighten]);
layer.add(lion);
stage.add(layer);
var slider = document.getElementById('slider');
slider.oninput = function () {
lion.brightness(slider.value);
layer.batchDraw();
};
}
var sources = {
lion: '/images/Image1.jpg'
};
loadImages(sources, buildStage);
</script>
output 像這樣:
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.