极客观点
项目管理
HarmonyOS
刚刚接触canvas，学着把一张图片转换成黑白的。
但是始终不能成功，有点懵逼。
谢谢大家。
<body>
<canvas width="500" height="500"></canvas>
<script>
var canvas = document.querySelector("canvas");
var ctx = canvas.getContext("2d");
var image = new Image();
image.onload = function(){
ctx.drawImage(image,0,0);
makeGrayScale();
}
image.src = "images/background.jpg";
var makePixelGrayScale = function (r,g,b,a){
var y = ( 0.3 * r) + ( 0.59 * g ) + ( 0.11 * b);
return {r:y,g:y,b:y,a:y};
};
function makeGrayScale(){
var r,g,b,a;
var imageData = ctx.getImageData(0,0,500, 500)
var numPixels = imageData.data.length/4;
for (var i=0; i<numPixels; i++){
r = imageData.data[i*4+0];
g = imageData.data[i*4+1];
b = imageData.data[i*4+2];
a = imageData.data[i*4+3];
pixel = makePixelGrayScale(r,g,b,a);
imageData.data[i*4+0] = pixel.r;
imageData.data[i*4+1] = pixel.g;
imageData.data[i*4+2] = pixel.b;
imageData.data[i*4+3] = pixel.a;
}
ctx.putImageData(imageData,0,0);
};
</script>
</body>Uncaught DOMException: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data.
at makeGrayScale (file:///C:/Users/yocor/Github/aboutCanvas/createCanvas.html:26:37)
at Image.image.onload (file:///C:/Users/yocor/Github/aboutCanvas/createCanvas.html:14:17)
是什么不成功？报了什么错？出现了什么现象？你不可能就贴一段代码上来让回答的人猜吧。
代码无错，如果你这边不能运行，一定是你直接用点开html的方式来运行代码。
通过这种方式运行的话，你引入的图片可能会被浏览器认为是不同的站点，从而canvas在getImageData的时候出现跨域错误，canvas不能获取渲染的跨域的图片的信息。
如果你想正确运行，需要用IIS或者nginx这样的东西来做个本地站点，或者使用webpack-dev-server