刚刚接触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)
3 回答
尚方宝剑之说
TA贡献1788条经验 获得超4个赞
是什么不成功？报了什么错？出现了什么现象？你不可能就贴一段代码上来让回答的人猜吧。
代码无错，如果你这边不能运行，一定是你直接用点开html的方式来运行代码。
通过这种方式运行的话，你引入的图片可能会被浏览器认为是不同的站点，从而canvas在getImageData的时候出现跨域错误，canvas不能获取渲染的跨域的图片的信息。
如果你想正确运行，需要用IIS或者nginx这样的东西来做个本地站点，或者使用webpack-dev-server
添加回答
举报
0/150
提交
取消