HTML5 Canvas:反转像素的颜色

Question

我正在关注WC3上的教程:http://www.w3schools.com/tags/canvas_getimagedata.asp

我把我的图像加载了,旁边是画布,我有一个漂亮的寄宿生,我打算显示并排图像.我试图反转像素的颜色作为演示,但我不能让颜色改变我不明白为什么.

这是我的代码笔,我将HTML与JS分开:http: //codepen.io/kKasper/pen/zBXWOZ

document.getElementById("team").onload = function() {
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("team");
    ctx.drawImage(img, 0, 0);
    var imgData = ctx.getImageData(0, 0, c.width, c.height);
    // invert colors
    var i;
    for (i = 0; i < imgData.data.length; i += 4) {
        imgData.data[i] = 255 - imgData.data[i];
        imgData.data[i+1] = 255 - imgData.data[i+1];
        imgData.data[i+2] = 255 - imgData.data[i+2];
        imgData.data[i+3] = 255;
    }
    ctx.putImageData(imgData, 0, 0);
};

看来是ctx.drawImage(img,0,0); 正在画布中绘制我的图像.出于某种原因,在WC3教程上工作的功能在我的图像上无法正常工作,因为当它在函数之后绘制图像时没有任何变化.

有人可以帮我解决这个问题吗？

Answer 1

只要浏览器支持混合,您就可以使用合成来反转图像.

好处:

• 这比快 getImageData
• 画布不会以跨源安全限制为对象

ctx.drawImage(img,0,0);
ctx.globalCompositeOperation='difference';
ctx.fillStyle='white';
ctx.fillRect(0,0,canvas.width,canvas.height);

Answer 2

与 markE 的答案类似，但在绘制过程中保持透明度/alpha 通道。

ctx.filter = 'invert(1)'
ctx.drawImage(img, 0, 0)

您还可以应用大量其他过滤器

如果你想保存到base64数据网址，你可以在绘制到画布后使用以下命令

const dataUrl = canvas.toDataURL()

如果您收到有关画布受污染的错误消息，请在设置 image.src 之前，将该crossOrigin属性设置为'Anonymous'：

const img = new Image()
img.crossOrigin = 'Anonymous'
img.onload = myLoadFn
img.src = myImgUrl

Answer 3

尝试在 Codepen 上打开浏览器的开发者控制台。我收到此错误：

Uncaught SecurityError: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data.

这意味着您已将另一个域（即不是codepen.io）的图像绘制到画布上。作为防止恶意脚本与外部域通信的安全功能，浏览器将禁止 JS 访问此类数据。请参阅 MDN 关于同源策略的文章。

尝试从本地文件运行代码，或使用来自与页面相同域的图像。我打赌它会起作用。

开发控制台是您的朋友！