putImageData是“变暗”的图片 [英] putImageData is "darkening" the image
问题描述
我有两个画布。在第一个画布中我绘制一个图像，第二个画布我从第一个画布复制图像并使用getImageDataeputImageData粘贴在第二个画布中
I have two canvas. In the first canvas I draw an image and the second canvas I copy the image from the first canvas and paste in the second canvas by using the "getImageData" e "putImageData"
以下代码是我在我的应用程序中的一小段代码。我切断了没有引起问题的部件并将其压缩。 [注意，javascript中存在的图像需要存在image3.jpg]。
The following code is a small piece of the code that I have on my application. I cut off the parts that was not causing the issue and compact it. [Note that the image present in the javascript needs to exists "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>
问题在于图片在第二个画布上看起来比较原始的那个：
The issue is that the image on the second canvas looks darken that the original one:
我在几个浏览器中进行了测试，但我唯一能看到问题的是用于android的chrome，其中android版本等于或大于6.0.1。 （对于我们测试的所有手机，Chrome版本为57.0.2987.132。）
I tested in several browsers but the only one that I could see the issue was the chrome for android which the android version is equals or greater than 6.0.1. (The chrome version was the 57.0.2987.132 for all phones that we tested).
更新：我已将问题报告给铬。
在此链接上查看： https：//错误。 chromium.org/p/chromium/issues/detail?id=713632#
推荐答案
目前，解决方案是使用drawImage而不是putImageData。
For now, the solution is to use the drawImage instead of the putImageData.
在问题解决后跟随代码：
Follows the code with the issue solved:
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是“变暗”的图片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
