Question

我有两个画布。在第一个画布中我绘制一个图像，第二个画布我从第一个画布复制图像并使用“getImageData”e“putImageData”粘贴到第二个画布中

以下代码是我在我的应用程序中的一小段代码。我切断了没有引起问题的部件并将其压紧。 [注意，javascript中存在的图像需要存在“image3.jpg”]。

var canvasLocal = document.getElementById('c'),
	context = canvasLocal.getContext('2d'),
	canvasToRender1 = document.getElementById('c2'),
	ctx = canvasLocal.getContext("2d"),
	canvasToRender1Ctx = canvasToRender1.getContext('2d'),
	base_image = new Image();

base_image.src = 'imagem3.jpg';
base_image.onload = function() {
	canvasLocal.width = canvasToRender1.width = base_image.width;
	canvasLocal.height = canvasToRender1.height = base_image.height;
	
	context.drawImage(base_image, 0, 0);
		
	var imgData = ctx.getImageData(0, 0, base_image.width, base_image.height);

	
	canvasToRender1Ctx.putImageData(imgData,0,0);
}

<html>
<head>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
	
</head>
<body>
	
<canvas id="c"></canvas>
<canvas id="c2"></canvas>
<script src="javascript.js"></script>
</body>
</html>

问题是第二个画布上的图像看起来比原始图像暗：

我在几个浏览器中进行了测试，但唯一一个我能看到问题的是android for android，其中android版本等于或大于6.0.1。（对于我们测试的所有手机，Chrome版本为57.0.2987.132。）

更新：我已将问题报告给Chrome。 请在此链接上查看：https://bugs.chromium.org/p/chromium/issues/detail?id=713632#

Answer 1

需要修改像素时的分辨率。您可以使用ImageBitmap。

return createImageBitmap(imageData).then(function(bitmap){
    var canvas = document.createElement('canvas');
    canvas.width = bitmap.width;
    canvas.height = bitmap.height;
    canvas.getContext('2d').drawImage(bitmap, 0, 0);
});

Answer 2

目前，解决方案是使用drawImage而不是putImageData。

在解决问题的情况下遵循代码：

var canvasLocal = document.getElementById('c'),
context = canvasLocal.getContext('2d'),
canvasToRender1 = document.getElementById('c2'),
ctx = canvasLocal.getContext("2d"),
canvasToRender1Ctx = canvasToRender1.getContext('2d'),
base_image = new Image();

base_image.src = 'imagem3.jpg';
base_image.onload = function() {
     canvasLocal.width = canvasToRender1.width = base_image.width;
     canvasLocal.height = canvasToRender1.height = base_image.height;

     context.drawImage(base_image, 0, 0);

}

putImageData使图像“变暗”

2 个答案: