JS中创建对象的方法有哪些（Javascript中的图像数据对象：Image、ImageData 和 ImageBitmap）

前端处理图片数据               ，有提供几个常用的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> 标签元素 
 
 
 
 
 
 
 
 
 
 
 
 
 
。通过下面两种方式




















，可以获取或生成新的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 环境下使用的  
  
  
  
  
  
  
 。

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) // 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                      。

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() { [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位图对象

 
 

 
 

 
 

 
 

 
 

 
 

 
 
，即可将文件直接绘制到画布中













，展示出来
 

 

 

 

 

 

 

。