1 <canvas id="myCanvas" width="500" height="500"></canvas>
1 // 使图像反显 2 function draw(id){ 3 var canvas = document.getElementById(id); 4 if(canvas == null){ 5 return false; 6 } 7 var context = canvas.getContext("2d"); 8 var img = new Image(); 9 img.src = 'heng.jpg'; 10 img.onload = function(){ 11 context.drawImage(img,0,0,500,500); 12 13 console.log(img.width,img.height,canvas.width, canvas.height)// 510 764 500 500 14 15 var imagedata = context.getImageData(0,0,canvas.width,canvas.height); 16 var pixel = imagedata.data; 17 18 for(var i = 0, n = pixel.length; i < n; i+=4 ){ 19 pixel[i + 0] = 255 - pixel[i + 0];// red 20 pixel[i + 1] = 255 - pixel[i + 1];// green 21 pixel[i + 2] = 255 - pixel[i + 2];// blue 22 } 23 context.putImageData(imagedata,0,0); 24 }; 25 } 26 27 draw("myCanvas");
var imagedata = context.getImageData(0,0,canvas.width,canvas.height);
该方法使用四个参数,sx,sy,sw,sh.(sx,sy分别表示所获取区域的起点横坐标,起点纵坐标; sw,sh分别表示所获取区域的宽度和高度)
imagedata 是一个 CanvasPixelArray 对象,具有width,height,data等属性。data属性是一个保存像素数据的数组[r1,g1,b1,a1,r2,g2,b2,a2...]
context.putImageData(imagesdata, dx,dy[,dirtyX, dirtyY,dirtyWidth,dirtyHeight]);
后面dirtyX, dirtyY,dirtyWidth,dirtyHeight 这四个参数为可选参数,给出一个矩形的起点横坐标,起点纵坐标,宽度与高度,如果加上这四个参数,则只绘制像素组中这个矩形范围内的图像。
attention: 在测试代码的时候,直接打开会报错:
Unable to get image data from canvas because the canvas has been tainted by cross-origin data
需要放到localhost下面运行即可