了解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.,

    实时效果如下:

    其他

    规范文档

    规范地址 规范状态 备注
    HTML现行标准
    这个规范中定义了'CanvasRenderingContext2D.getImageData'
    现行标准 -

    相关资源

    兼容性

    IE9+支持,全兼容。


    by zhangxinxu 2019-10-18 01:44:04