了解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. 我们可以只让其中部分数据用来替换。,dirtyHeight,通过这几个参数设置,dirtyYdirtyWidth,这些参数是作用在imagedata这个“图片膏药”上的。默认情况下,第3类就是dirtyX,表示脏矩形的坐标和尺寸,imagedata所有数据都参与替换

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

案例

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

示例图片

下面这个图像是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 2019-10-18 01:44:05