canvas处理图片

Posted 2020-09-09 莫问、前程

　canvas绘制图片的三种方法：

　　　　drawImage(image, x, y)

　　　　drawImage(image, x, y, width, height)

　　　　drawImage(image, sourceX, sourceY, sourceWidth, sourceHeight,destX, destY, destWidth, destHeight)

　参数：

　　　image：所要绘制的图像。这必须是表示 <img> 标记或者屏幕外图像的 Image 对象，或者是 Canvas 元素

　　   x,y：要绘制的图像的左上角的位置。

　　　width，height：图像所应该绘制的尺寸。指定这些参数使得图像可以缩放

　　   sourceX,sourceY: 图像将要被绘制的区域的左上角。这些整数参数用图像像素来度量

　　　sourceWidth, sourceHeight:图像所要绘制区域的大小，用图像像素表示

　　　destX, destY：所要绘制的图像区域的左上角的画布坐标　

　　　destWidth, destHeight：图像区域所要绘制的画布大小

　对canvas绘制的图片处理：

　　　　1、复制画布上指定的矩形的像素数据

　　　　　　var imageDatas = ctx.getImageData(x, y, width, height);

　　　　　　参数：

　　　　　　　x,y：复制的左上角位置的 x、y 坐标。

　　　　　　　width,heigth：将要复制的矩形区域的宽度、高度

　　　　2、获取指定矩形区域的rgba

　　　　　　var dataArray = imageDatas.data;

　　　　3、通过for循环对每个像素点设置新的rgba

　　　　　　如反色：255 减去 r g b 现在的值

　　　　　　　灰色处理（r g b等值）：可以将现在的 r g b 加起来除以3再分别赋值

　　　　　　　透明度：设置dataArray[i + 3]的值即可

　　　　4、图像数据放回画布上

　　　　　　ctx.putImageData(imageDatas,x,y,dirtyX,dirtyY,dirtyWidth,dirtyHeight);

　　　　　　参数：

　　　　　　　　imageDatas：放回画布的 imageDatas对象

　　　　　　　　x,y：要绘制的图像的左上角的位置　　　　

　　　　　　　　dirtyX,dirtyY（可选）：在画布上放置图像的位置

　　　　　　　　dirtyWidth,dirtyHeight（可选）：在画布上绘制图像所使用的宽度、高度。

　　　　如下代码为设置透明度。

　　var imageDatas = ctx.getImageData(0, 0, 450, 450);　　　　//复制画布上指定的矩形的像素数据
　　var dataArray = imageDatas.data;　　　　　　　　　　　　　　 //获取矩形区域的 rgba，范围均是（0-255）
    for (var i = 0 ; i < dataArray.length ; i += 4) {　　　　
        var r = dataArray[i];　　　　　　　　　　　　　　　　　　//设置新的 rgba
        var g = dataArray[i+1];
        var b = dataArray[i+2];
        var a = dataArray[i + 3];　　　　　　　　　　　　　　　 //此处代表图片的透明度（透明度也是 0-255）
        dataArray[i] = r;　　　　　　　　　　　　　　　　　　　　//赋予矩形区域新的 rgba 值
        dataArray[i + 1] = g;
        dataArray[i + 2] = b;        
        dataArray[i + 3] = a * 0.2; 
    }
　　 ctx.putImageData(imageDatas, 0, 0);