位置: IT常识 - 正文
Javascript中的图像数据对象：Image、ImageData 和 ImageBitmap(javascript图表)
编辑：rootadmin推荐整理分享Javascript中的图像数据对象：Image、ImageData 和 ImageBitmap(javascript图表)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:javascript代码图片,javascript image,javascript代码图片,javascript 绘图,javascript 绘图,js图片对象,javascript图表,javascript 绘图,内容如对您有帮助，希望把文章链接给更多的朋友！
前端处理图片数据，有提供几个常用的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-URLBase64图像字符串这几种加载图像资源的方式，在当前的前端开发中，都是非常常见的。其中，关于Object-URL和Base64的知识，可查看之前的博文：前端二进制知识与相关API 和 Base64知识详解。
需要注意的是，Image对象是Web-API，依赖浏览器环境；不是JS-API，在nodejs中无法使用。
HTMLImageElement由上面已知，Image构造函数会返回一个 HTMLImageElement 实例，该实例加载到页面上，就对应了一个 <img> 标签元素。通过下面两种方式，可以获取或生成新的img元素实例。
获取页面的img元素：<img src="..." id="imgElm">const img = document.getElementById('imgElm')console.log(img.width)以上代码，页面html定义了一个img元素，可以在JS中通过元素id获取到对应的元素对象。
新创建一个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() 稍微快一些。
前端常用图片处理中，<img> 标签用于加载图片资源，但在各种图片操作上稍显不足，所以一般会使用到 canvas 画布，接下来的两个对象，都是在 canvas 环境下使用的。
ImageDataImageData 对象表示 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)// ImageData {data: Uint8ClampedArray(1048576), width: 512, height: 512, colorSpace: 'srgb'}// data: Uint8ClampedArray(1048576) [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, …]以上代码，定义了一个 512 * 512 宽高的ImageData对象实例，通过输出，可以看到，像素点数据默认值都为0。
colorSpace：色彩空间，可取两个值 srgb 或 display-p3，都是RGB颜色模型的色彩空间，部分浏览器不支持。
关于 RGB 颜色的详细知识，可见博文 前端需要了解的颜色模型，RGB、HSL和HSV。
Uint8ClampedArrayImageData对象的数据参数和属性，是 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 = 100canvas.height = 100document.body.append(canvas)接着，我们通过 createImageData() 定义一个ImageData像素点对象实例，并给它的元素赋值，R通道默认255，BG通道取随机值，然后使用 putImageData() 将像素点数据绘制出来：
const ctx = canvas.getContext('2d')const imagedata = ctx.createImageData(100, 100)const length = imagedata.data.lengthfor (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() { [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.width canvas.height = imageBitmap.height const ctx = canvas.getContext('2d') ctx.drawImage(imageBitmap, 0, 0) document.body.append(canvas) })}通过监听控件，读取到文件流对象，createImageBitmap() 可以直接读取文件流数据，生成一个ImageBitmap位图对象。创建canvas画布对象，使用 drawImage() 加载该imageBitmap位图对象，即可将文件直接绘制到画布中，展示出来。
下一篇：微信小程序设计规范(微信小程序设计规范(官方)文档)
