HTML5画布：像素

我下面的WC3教程的颜色反转在这里找到：http://www.w3schools.com/tags/canvas_getimagedata.asp HTML5画布：像素

我有我的图像加载起来，旁边这个是我有一个好房客画布，我打算并排显示图像。我试图反转像素的颜色作为演示，但我无法让颜色改变，我不明白为什么。

这是我的代码猪圈里我分离从JS的HTML： 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教程上运行的函数在我的图像上无法正常工作，因为它在函数后面绘制图像时没有任何更改。

任何人都可以帮我解决这个问题吗？

来源

2016-08-19 Kasper_Sky

你的代码工作对我侧。确保您正在加载的图像实际上可用并正在加载。 – ASDFGerte

我需要做到这一点，除了保留绘制图像的透明度。通过在imgData.data [i]> 0的循环中添加条件检查，可以避免所有透明像素。 – EvilJordan

尝试在您的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文章。

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

开发控制台是你的朋友！

来源

2016-08-19 22:24:45 qxz

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

优点：

这是快于getImageData
画布不会与跨域安全限制对象

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

来源

2016-08-19 22:33:52 markE

HTML5画布：像素

回答

相关问题