剛剛接觸canvas,學(xué)著把一張圖片轉(zhuǎn)換成黑白的。但是始終不能成功,有點懵逼。謝謝大家。 <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)
用Js將彩色圖片轉(zhuǎn)換成黑白,失敗
慕工程0101907
2019-03-21 18:13:51