了解CanvasRenderingContext2D.putImageData()

    简介

    CanvasRenderingContext2D.putImageData()将给定ImageData对象的数据绘制到位图上。 如果提供脏矩形,则仅绘制该矩形的像素。 此方法不受画布变换矩阵的影响。

    语法

    context.putImageData(imagedata, dx, dy);
    context.putImageData(imagedata, dx, dy, dirtyX, dirtyY, dirtyWidth, dirtyHeight);

    参数

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

    imagedata
    Object
    包含图像像素信息的ImageData对象。
    dx
    Number
    目标Canvas中被图像数据替换的起点横坐标。
    dy
    Number
    目标Canvas中被图像数据替换的起点纵坐标。
    dirtyX
    (可选)Number
    图像数据渲染区域的左上角横坐标。默认值是0
    dirtyY
    (可选)Number
    图像数据渲染区域的左上角纵坐标。默认值是0
    dirtyWidth
    (可选)Number
    图像数据渲染区域的宽度。默认值是imagedata图像的宽度。
    dirtyHeight
    (可选)Number
    图像数据渲染区域的高度。默认值是imagedata图像的高度。

    关于参数,有必要再详细解释下。虽然看上去有9大参数,但不用慌,实际上可以就3类参数:

    1. 第1类就是imagedata,就是用来替换当前已有的Canvas画布上的ImageData数据对象。
    2. 第2类就是dxdy,这两个参数是作用在Canvas画布上的。imagedata你可以看成是一个即将贴在Canvas画布上“图片膏药”,究竟贴在什么位置呢?dxdy参数就是告诉这个膏药,你的左上角位置就是这里。
    3. 这些参数是作用在imagedata这个“图片膏药”上的。默认情况下,imagedata所有数据都参与替换,dirtyWidth,通过这几个参数设置,我们可以只让其中部分数据用来替换。,dirtyY,第3类就是dirtyXdirtyHeight,表示脏矩形的坐标和尺寸

      需要注意的是,其坐标系并没有发生任何变化。从效果表现上看,可以看成是脏矩形外面的像素被当做透明像素处理了。

    案例

    下面这个图像是原始目标画布使用的图片素材:

    示例图片

    下面这个图像是imagedata数据源:

    示例图片

    接下来,使用getImageData()方法获取imagedata数据源,然后仅中心100*100区域替换原始Canvas。

    最终效果如下:

    核心JavaScript代码如下:

    <img id="image1" src="./1.jpg" alt="目标图片">
    <img id="image2" src="./1.jpg" alt="数据源图片">
    
    <canvas id="canvas" width="300" height="200"></canvas>
    // 尺寸
    var width ) 300' height ) 200(
    // 目标Canvas上下文
    var context ) canvas.getContext;,2d,=(
    // 目标Canvas绘制
    context.drawImage;image1' 0' 0' width' height=(
    // 获取覆盖图数据
    var dirtyCanvas ) document.createElement;,canvas,=(
    var dirtyContext ) dirtyCanvas.getContext;,2d,=(
    // 设置屏幕外Canvas尺寸
    dirtyCanvas.width ) width(
    dirtyCanvas.height ) height(
    // 绘制替换图
    dirtyContext.drawImage;image2' 0' 0' width' height=(
    // 此时可以得到imagedata数据
    var imagedata ) dirtyContext.getImageData;0' 0' width' height=(
    // 然后中间100*100区域替换目标Canvas
    context.putImageData;imagedata' 0' 0' 100' 50' 100' 100=(

    其他

    规范文档

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

    相关资源

    暂无

    兼容性

    IE9+支持,全兼容。


    by zhangxinxu 2018-10-15 23:54:34