putImageData 正在“变暗”图像答案

【问题标题】：putImageData is "darkening" the imageputImageData 正在“变暗”图像
【发布时间】：2017-09-16 21:05:47
【问题描述】：

我有两个画布。在第一个画布中，我绘制了一个图像，第二个画布我从第一个画布复制图像并使用“getImageData”和“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>

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

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

更新：我已经向 Chromium 报告了这个问题。 在此链接上查看：https://bugs.chromium.org/p/chromium/issues/detail?id=713632#

【问题讨论】：

我会有一个三字母的评论，以 W 开头，以 F 结尾，中间有一个 T。我知道你有一个解决方法，但只是出于好奇，你能用任何图像重现吗？您的原始图像是否嵌入了颜色配置文件？
是的，我可以。我用不同尺寸的不同图像和不同的画布尺寸进行了测试。这真的很奇怪。让我们看看 google chrome 的人对此是怎么说的

标签： javascript android html canvas

【解决方案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);
});

【讨论】：

【解决方案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);

}

【讨论】：

所以，如果我正在获取图像数据，请对其进行修改，在这种情况下我无法使用 drawImage，那么我需要等到 chrome 解决问题？
可能。就我而言，这很有效。对于您的情况，我不知道是否有其他解决方案，然后等待 chrome 修复
@RicardoRocha 你能发布更多代码吗？对我来说，canvasToRender1 似乎什么也没做。