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

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

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

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

尝试从本地文件运行代码，或使用与页面相同的域中的映像。我打赌它会奏效。

开发控制台是你的朋友！

Answer 3

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

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

There's loads of other filters you can apply as well

如果要保存到base64数据网址，可以在绘制到画布后使用以下内容

const dataUrl = canvas.toDataURL()

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

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