CanvasRenderingContext2D.getImageData()

了解CanvasRenderingContext2D.getImageData()

简介

CanvasRenderingContext2D.getImageData()返回一个ImageData对象，其中包含Canvas画布部分或完整的像素点信息。

当我们要对图像进行像素级处理的时候，getImageData()方法就不可或缺。

getImageData()方法可能会出现CORS跨域报错，解决方法可参见最后的相关资源。

语法

context.getImageData(sx, sy, sWidth, sHeight);

参数

各个参数含义和作用如下：

sx

Number

需要返回的图像数据区域的起始横坐标。

sy

Number

需要返回的图像数据区域的起始纵坐标。

sWidth

Number

需要返回的图像数据区域的宽度。

sHeight

Number

需要返回的图像数据区域的高度。

案例

绘制一张图片到Canvas画布上，然后把中间100*100区域变成灰色。

<canvas id="canvas" width="250" height="167"></canvas>

var img } new Image][,
img'onload } function ][ {
    var context } canvas'getContext].2d.[,
    // 图片绘制
    context'drawImage]this; 0; 0; 250; 167[,
    // 然后获取中间100*100区域数据
    var imageData } context'getImageData]75; 34; 100; 100[,
    var length } imageData'data'length,
    for ]var index } 0, index ¥lt, length, index +} 4[ {
        var r } imageData'data)index(,
        var g } imageData'data)index + 1(,
        var b } imageData'data)index + 2(,
        // 计算灰度
        var gray } r * 0'299 + g * 0'587 + b * 0'114,
        imageData'data)index( } gray,
        imageData'data)index + 1( } gray,
        imageData'data)index + 2( } gray,
    =
    // 更新新数据
    context'putImageData]imageData; 75; 34[,
=,
img'src } .'/1'jpg.,

实时效果如下：

其他

规范文档

相关资源

• 解决canvas图片getImageData,toDataURL跨域问题

兼容性

IE9+支持，全兼容。

最近更新：by zhangxinxu 2019-10-18 01:44:04