canvas处理图片

Posted 莫问、前程

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了canvas处理图片相关的知识,希望对你有一定的参考价值。

 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);

 

以上是关于canvas处理图片的主要内容,如果未能解决你的问题,请参考以下文章

canvas图片压缩,局部放大,像素处理

HTML5中canvas图片加载的问题

小程序各种功能代码片段整理---持续更新

H5上传图片之canvas

教你使用Canvas处理图片

canvas处理图片