Javascript中的图像数据对象：Image、ImageData 和 ImageBitmap

文章目录

• • Image
  • ImageData
  • • Uint8ClampedArray
    • ImageData 在 canvas 中的应用
    • • createImageData()
      • getImageData()
      • putImageData()
      • 实际应用示例
  • ImageBitmap
  • • createImageBitmap()
    • 使用示例

前端处理图片数据，有提供几个常用的 API，如 Image、ImageData、ImageBitmap 等等。这些对象可以为我们操作图片带来较大帮助，今天我们就详细介绍下这几个有用的对象接口。

Image

前端处理图片，首先能想到的 API 就是 Image 对象。
它的主要作用是：能够加载一张图片资源，创建并返回一个新的 HTMLImageElement 实例，拥有图像元素的所有属性和事件。
构造函数语法：Image(width, height)，带有两个参数，表示图片的宽度和高度属性。
使用它也非常简单，如下所示：

const img = new Image()
img.src = 'chrome.png'

以上代码定义一个 img 的对象实例，并给 src 属性赋值一个图片链接，这样就能加载该图片资源，得到一个图片元素对象 img，接下来就能读取图片的 width 和 height 等宽高元素了。

Image 对象实例还有一些常用的属性和事件，也是我们必须要了解的：

• 属性：src、width、height、complete、alt、name 等
• 事件：onload、onerror、onabort 等

Image 对图片资源的加载是一种异步的方式，一般是通过 onload 事件监听，实时获取到图片对象实例，如下使用 Promise 对象进行函数封装：

const loadImage = (url) => {
  return new Promise((resolve, reject) => {
    const img = new Image()
    img.onload = () => {
      resolve(img)
    }
    img.onerror = (err) => {
      reject(err)
    }
    img.src = url
  })
}

以上代码，就是最常使用 Image 的方式，我们以前关于图片应用的博文也有提到该种用法。在之前的博文一步步实现前端图片裁剪功能，就是使用的这种方式加载图像资源。

src 属性，可以的取值：

• 本地图像路径
• 网络图像链接
• Object-URL
• Base64 图像字符串

这几种加载图像资源的方式，在当前的前端开发中，都是非常常见的。其中，关于 Object-URL 和 Base64 的知识，可查看之前的博文：前端二进制知识与相关 API 和 Base64 知识详解。

需要注意的是，Image 对象是 Web-API，依赖浏览器环境；不是 JS-API，在 nodejs 中无法使用。

HTMLImageElement

由上面已知，Image 构造函数会返回一个 HTMLImageElement 实例，该实例加载到页面上，就对应了一个 标签元素。通过下面两种方式，可以获取或生成新的 img 元素实例。

1. 获取页面的 img 元素：

img src="..." id="imgElm">

const img = document.getElementById('imgElm')
console.log(img.width)

以上代码，页面 html 定义了一个 img 元素，可以在 JS 中通过元素 id 获取到对应的元素对象。

2. 新创建一个 img 元素

const img = document.createElement('img')
img.onload = () => {
  document.body.append(img)
}
img.src = './logo.png'

以上代码，使用 document.createElement() 方法新建一个图片对象，设置图像资源，加载完成后显示在页面上。

可以看出，使用 document.createElement() 方法和使用 Image() 的方式几乎是一致的，所能达成的效果也相似，它们都返回了一个新的 HTMLImageElement 对象实例。

通过简单的测试对比，单张或少量图片的加载性能上，Image() 和 createElement() 几乎没区别，都可以使用；但在大批量加载图片资源时，Image() 比 createElement() 稍微快一些。

前端常用图片处理中， 标签用于加载图片资源，但在各种图片操作上稍显不足，所以一般会使用到 canvas 画布，接下来的两个对象，都是在 canvas 环境下使用的。

ImageData

ImageData 对象表示 canvas 元素指定区域的像素数据。
图片像素数据实际上就是一个个的颜色值，可使用 RGBA 颜色模型来表示，所以 ImageData 对象的像素数据，就是图像的一个个像素点的颜色值，长度为 windth * height * 4，这里的 4 就是对应的 RGBA 4 个颜色通道。图像的详细知识可见博文 图片基础知识介绍。

通过构造函数，可以很方便的创建对象实例：

new ImageData(array, width, height);
new ImageData(width, height);

参数说明

• array：
  是一个 Uint8ClampedArray 类型数组的实例，存储的是像素点的颜色值数据，数组元素按每个像素点的 RGBA 4 通道的数值依次排列，该数组的长度必须为 windth * height * 4，否则报错。
  如果不给定该数组参数，则会根据宽高创建一个全透明的图像。
• width：图像宽度
• height：图像高度

ImageData 对象实例属性，有三个：data、width、height。

const imgData = new ImageData(512, 512)
console.log(imgData)

以上代码，定义了一个 512 * 512 宽高的 ImageData 对象实例，通过输出，可以看到，像素点数据默认值都为 0。

colorSpace：色彩空间，可取两个值 srgb 或 display-p3，都是 RGB 颜色模型的色彩空间，部分浏览器不支持。

关于 RGB 颜色的详细知识，可见博文 前端需要了解的颜色模型，RGB、HSL 和 HSV。

Uint8ClampedArray

ImageData 对象的数据参数和属性，是 Uint8ClampedArray 类型数组的实例，关于 Uint8ClampedArray，我们也需有所了解。
Uint8ClampedArray 是 8 位无符号整型固定数组，属于 11 个类型化数组 (TypeArray) 中的一个，元素值固定在 0 -255 区间的。
它的属性参数及用法，与其他中的类型化数组一样，具体的介绍可见博文 前端二进制知识与相关 API。

因为 Uint8ClampedArray 无符号整形固定的特点，对于存储像素点的颜色值正好，RGBA 四个通道，每个通道的取值都是 0 – 255 间的数字。如表示红色、无透明，[255, 0, 0, 255]。
注意：

• 透明度一般在前端颜色体系中使用的是 0 - 1 区间的值，包括在 canvas 中颜色属性也是 0 - 1。而 RGB 三色的取值则基本保持一致，即 0 - 255。
• 图像像素点数组的长度必须为 宽 * 高 * 4。

ImageData 在 canvas 中的应用

ImageData 图像像素点对象，是基于前端的 canvas 环境，应用也都是在 canvas 操作中，常见的如创建方法 createImageData()、读取方法 getImageData()、更新方法 putImageData()。
这三个方法都是 canvas 的绘制上下文的实例方法，下面我们一一介绍。

createImageData()

createImageData() 用于创建一个全新的空的 ImageData 对象，与 ImageData() 构造函数作用一样，返回像素点信息数据。
基本语法：

context.createImageData(width, height)
context.createImageData(imagedata)

通过宽高、或者其他 ImageData 对象进行创建新的对象。

getImageData()

返回 canvas 画布中部分或全部的像素点信息数据。
基础语法：

context.getImageData(sx, sy, sWidth, sHeight)

参数说明：
sx：返回图像的起始横坐标
sy：返回图像的起始纵坐标
sWidth：返回的图像的宽度
sHeight：返回图像的高度

putImageData()

将指定的 ImageData 对象像素点数据绘制到位图上。
基础语法：

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

参数说明：
imagedata：图像像素点信息
dx：在目标 canvas 中的起始横坐标
dy：在目标 canvas 中的起始纵坐标
dirtyX：图像数据渲染区域的左上角横坐标，可选
dirtyY：图像数据渲染区域的左上角纵坐标，可选
dirtyWidth：图像数据渲染区域的宽度，可选
dirtyHeight：图像数据渲染区域的高度，可选

实际应用示例

其中，getImageData() 和 putImageData() 是前端通过 canvas 对图像进行像素级别处理的必不可少的两个方法。
下面，我们看一个具体的示例。

首先，我们创建一个随机函数用于取颜色值，定义宽高 100*100 的 canvas 元素：

const randomRGB = () => Math.floor(Math.random() * (255 - 0) + 0)

const canvas = document.createElement('canvas')
canvas.width = 100
canvas.height = 100
document.body.append(canvas)

接着，我们通过 createImageData() 定义一个 ImageData 像素点对象实例，并给它的元素赋值，R 通道默认 255，BG 通道取随机值，然后使用 putImageData() 将像素点数据绘制出来：

const ctx = canvas.getContext('2d')
const imagedata = ctx.createImageData(100, 100)
const length = imagedata.data.length
for (let i = 0; i  length; i += 4) {
  imagedata.data[i] = 255
  imagedata.data[i + 1] = randomInRange()
  imagedata.data[i + 2] = randomInRange()
  imagedata.data[i + 3] = 255
}
ctx.putImageData(imagedata, 0, 0)

最后，我们通过一个 1s 的定时器，使用 getImageData() 获取像素点数据后，将颜色值的 R 通道改为 0，再重新绘制图像：

setTimeout(() => {
  const imgData = ctx.getImageData(0, 0, 100, 100)
  const len = imgData.data.length
  for (let i = 0; i  len; i += 4) {
    imgData.data[i] = 0
  }
  ctx.putImageData(imgData, 0, 0)
}, 1000)

以上代码，就是展示了像素点操作的基本使用方法，会有一个图像改变的过程，从红色系变到绿色系，见下图所示：

ImageBitmap

除了 ImageData 以外，在 canvas 中还有另外一个对象，也可用于处理图像数据，那就是 ImageBitmap。
ImageBitmap 表示一个位图图像，可绘制到 canvas 中，并且具有低延迟的特性。
与 ImageData 一样的是，他们都是在浏览器环境下可以访问的全局对象。
与 ImageData 不一样的是，ImageBitmap 没有构造函数，可以直接引用对象(无意义)，但无法通过构造函数创建，而需要借助 createImageBitmap() 进行创建。

ImageBitmap



ImageBitmap()

属性和方法：

• width：只读，表示图像的像素宽度
• height：只读，表示图像的像素高度
• close()：释放 ImageBitmap 关联的所有图像资源

createImageBitmap()

createImageBitmap() 接受不同的图像资源，返回一个成功结果为 ImageBitmap 的 Promise 异步对象。
基本语法如下：

createImageBitmap(image[, options])
createImageBitmap(image, sx, sy, sw, sh[, options])

基本参数
image：图像源
可取值：img, SVG-image, video, canvas, HTMLImageElement, SVGImageElement, HTMLVideoElement, HTMLCanvasElement, Blob, File, ImageData, ImageBitmap, 或 OffscreenCanvas 对象
sx：裁剪起点横坐标
sy：裁剪起点纵坐标
sw：裁剪宽度
sh：裁剪高度
options：可选，为其设置选项的对象。可用的选项是:

imageOrientation: 是原样呈现还是垂直翻转，可选 none(默认)、flipY
premultiplyAlpha: 颜色通道是否由 alpha 通道预乘，可选 none、premultiply、default(默认)
colorSpaceConversion: 是否使用色彩空间转换进行解码，可选 none、default (默认)
resizeWidth: 压缩新宽度
resizeHeight: 压缩新高度
resizeQuality: 压缩质量，可选 pixelated、low(默认)、medium、high
createImageBitmap 可以直接读取多种图像数据源，比如 ImageData、File、以及多种 HTML 元素对象等等，这可以让我们更加灵活的处理图像数据。
下面看一个读取 File 对象的示例。

使用示例

ImageBitmap 对象主要用于在 canvas 中，使用 drawImage() 接口进行图像绘制时，作为该接口的参数(图像源)：

input id="input-file" type="file" accept="image/*" multiple />

以上代码，先定义一个 input 文件上传控件。

document.getElementById('input-file').onchange = (e) => {
  const file = e.target.files[0]
  createImageBitmap(file).then(imageBitmap => {
    const canvas = document.createElement('canvas')
    canvas.width = imageBitmap.width
    canvas.height = imageBitmap.height
    const ctx = canvas.getContext('2d')
    ctx.drawImage(imageBitmap, 0, 0)
    
    document.body.append(canvas)
  })
}

通过监听控件，读取到文件流对象，createImageBitmap() 可以直接读取文件流数据，生成一个 ImageBitmap 位图对象。创建 canvas 画布对象，使用 drawImage() 加载该 imageBitmap 位图对象，即可将文件直接绘制到画布中，展示出来。