putImageData 正在“变暗”图像
Posted
技术标签:
【中文标题】putImageData 正在“变暗”图像【英文标题】：putImageData is "darkening" the image 【发布时间】：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 的人对此是怎么说的 【参考方案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 似乎什么也没做。以上是关于putImageData 正在“变暗”图像的主要内容，如果未能解决你的问题，请参考以下文章
可以使用 getImageData / putImageData 之类的 html 图像吗？