码迷,mamicode.com
首页 > 其他好文 > 详细

canvas处理图片

时间:2017-04-09 09:32:40      阅读:177      评论:0      收藏:0      [点我收藏+]

标签:family   标记   图像   屏幕   pre   设置   坐标   透明度   array   

 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处理图片

标签:family   标记   图像   屏幕   pre   设置   坐标   透明度   array   

原文地址:http://www.cnblogs.com/intangible/p/6683621.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!