CanvasRenderingContext2D.putImageData()

了解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类就是dx，dy，这两个参数是作用在Canvas画布上的。imagedata你可以看成是一个即将贴在Canvas画布上“图片膏药”，究竟贴在什么位置呢？dx，dy参数就是告诉这个膏药，你的左上角位置就是这里。
3. 我们可以只让其中部分数据用来替换。，dirtyHeight，通过这几个参数设置，dirtyY，dirtyWidth，这些参数是作用在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);

其他

规范文档

相关资源

暂无

兼容性

IE9+支持，全兼容。

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