canvas图像处理

📌drawImage()

context.drawImage(image , 0, 0 );

context.drawImage(image , 0, 0 ,400 , 600);

context.drawImage(image,100,200,400,600,0,0,400,600);

📌缩放

function drawImageByScale(scale) {

var imageWidth=600* scale;

var imageHeight=700* scale;

var dx=canvas.width/2-imageWidth/2;

var dy=canvas.height/2-imageHeight/2;

context.clearRect(0,0,canvas.width,canvas.height);

context.drawImage(image,dx,dy,imageWidth,imageHeight);

}

📌离屏canvas：将第二个canvas中的内容加载到第一个canvas(可以制作放大镜效果)

📌getImageData  putImageData

getImageData(0, 0, canvas.width, canvas.height)

📌滤镜效果

//获取到像素

var imageData = contexta.getImageData(0,  0, canvasa.width, canvasa.height);

var pixelData = imageData.data;

data中存储形式为一维数组，每四个为一个像素