• 首页
  • css3教程
  • html5教程
  • jQuery手册
  • php7教程
  • MySQL手册
  • apache手册
  • getImageData()

    实例

    下面的代码通过 getImageData()复制画布上指定矩形的像素数据,然后通过 putImageData()将图像数据放回画布:

    var c=document.getelementbyid("myCanvas");
    var ctx=c.getcontext("2d");
    ctx.fillstyle="red";
    ctx.fillrect(10,10,50,50);
    function copy()
    {
    var imgdata=ctx.getimagedata(10,10,50,50);
    ctx.putimagedata(imgdata,10,70);
    }
    

    浏览器支持

    Internet Explorer 9、Firefox、Opera、Chrome 和 Safari 支持 getImageData()方法。
    注意:nternet Explorer 8 及之前的版本不支持<canvas>元素。

    定义和用法

    getImageData()方法返回 ImageData 对象,该对象拷贝了画布指定矩形的像素数据。

    注意:ImageData 对象不是图像,它规定了画布上一个部分(矩形),并保存了该矩形内每个像素的信息。

    对于 ImageData 对象中的每个像素,都存在着四方面的信息,即 RGBA 值:

    R -红色(0-255)
    G -绿色(0-255)
    B -蓝色(0-255)
    A - alpha 通道(0-255; 0 是透明的,255 是完全可见的)

    color/alpha 信息以数组形式存在,并存储于 ImageData 对象的data属性中。

    提示:在操作完成数组中的 color/alpha 信息之后,您可以使用putImageData()方法将图像数据拷贝回画布上。

    实例:

    以下代码可获得被返回的 ImageData 对象中第一个像素的 color/alpha 信息:

    red=imgData.data[0];
    green=imgData.data[1];
    blue=imgData.data[2];
    alpha=imgData.data[3];

    尝试一下

    提示:您也可以使用 getImageData()方法来反转画布上某个图像的每个像素的颜色。

    使用该公式遍历所有的像素,并改变其颜色值:

    red=255-old_red;
    green=255-old_green;
    blue=255-old_blue;

    请看下面的"尝试一下"实例!

    JavaScript 语法

    JavaScript 语法:context.getImageData(x,y,width,height);

    参数值

    参数描述
    x开始复制的左上角位置的 x 坐标(以像素计)。
    y开始复制的左上角位置的 y 坐标(以像素计)。
    width要复制的矩形区域的宽度。
    height要复制的矩形区域的高度。