putImageData正在使图像“变暗”
putImageData正在使图像“变暗”
提问于 2017-04-20 09:48:22
我有两张帆布。在第一个画布中，我绘制一个图像，第二个画布从第一个画布复制图像，然后使用"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的chrome版本等于或大于6.0.1。(我们测试的所有手机的铬版为57.0.2987.132 )。
更新:我已经向铬报告了问题。在这个链接上检查它：https://bugs.chromium.org/p/chromium/issues/detail?id=713632#
回答 2
Stack Overflow用户
回答已采纳
发布于 2017-04-20 10:06:08
目前，解决方案是使用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);
}Stack Overflow用户
发布于 2017-05-31 11:06:42
当需要修改像素时，找到了这种情况的分辨率。您可以使用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);
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/43515988
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号