文章目录

    • Image
      • HTMLImageElement
    • 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 实例，该实例加载到页面上，就对应了一个

ImageBitmap

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

// 直接引用对象，正常输出ImageBitmap// ƒ ImageBitmap() { [native code] }// 函数调用，报错：非法构造函数ImageBitmap()// Uncaught TypeError: Illegal constructor

属性和方法：

  • 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.widthcanvas.height = imageBitmap.heightconst ctx = canvas.getContext('2d')ctx.drawImage(imageBitmap, 0, 0)document.body.append(canvas)})}

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