跳到主要内容

createImageData

2023年08月12日
柏拉文
越努力，越幸运

一、认识​

ctx.createImageData() 是 Canvas 2D API 创建一个新的、空白的、指定大小的 ImageData 对象。所有的像素在新对象中都是透明的。

二、语法​

const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');

const imageData = ctx.createImageData(width,height);

const imageData = ctx.createImageData(imagedata);

  • width: ImageData 新对象的宽度。

  • height: ImageData 新对象的高度。

  • imagedata: 从现有的 ImageData 对象中，复制一个和其宽度和高度相同的对象。图像自身不允许被复制。

  • iageData: 指定了宽度和高度的，新的 ImageData 对象。新对象使用透明的像素进行填充。

三、场景​

3.1 创建一个空白的 ImageData​

const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');

const newImageData = ctx.createImageData(width, height);

创建一个新的, 空白的, 具体特定尺寸的 ImageData 对象, 所有像素被预设为透明黑。

3.2 根据一个 ImageData 创建新的 ImageData​

const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');

const newImageData = ctx.createImageData(imageData);

新的对象像素全部被预设为透明黑。这个并非复制了图片数据。