仓库源文，站点原文

layout: post title: Comprehensive Image Processing on Browsers

tags: [image, browser, file, blob, data urls, http urls, object urls, typedarray, buffer, dataview, arraybuffer]

Images can be represented in different types. They can be summarized as 5 types: DOM, URL, File, ImageData and Buffer.

Image Data Types

DOM

<img>

<img> elements load images from URL(e.g. Data URLs, HTTP URLs or Object URLs).

<canvas>

<canvas> elements draw images by canvas API drawImage from <img> elements.

URL

Data URLs

Data URLs carries base64 encoded image data. Image binary can be decoded from Data URLs. Data URL image file size is a little larger than the original binary data.

HTTP URLs

HTTP URLs represent images stored on servers. HTTP URLs are used to fetch image data from servers.

Object URLs

Object URLs represent the File or Blob object. Object URLs can be created by createObjectURL API, and released by revokeObjectURL API. The object is stored in browser memory and can be accessed by a short Object URL.

File

Blob

A Blob object represents a file-like object of binary data. It contains a readyonly size property and a readyonly type property. You can retrieve the binary data by slice, stream, text and arrayBuffer methods.

File

A File object is a special Blob object. In addtion to the Blob properties and methods, the File object contains lastModified, name properties.

ImageData

A ImageData object is a JavaScript object containing width, height and data properties, represents the image width, height and pixel data. data property is an one-dimensional array, containing data like [R, G, B, A, R, G, B, A]. Each [R, G, B, A] represents a pixel. You can create a ImageData by <canvas> API createImageData or the ImageData constructor.

Buffer

ArrayBuffer

There is only one way of accessing the binary data on browsers ArrayBuffer. An ArrayBuffer represents a raw binary data buffer of the image. ArrayBuffer cannot be read and written. You can only convert an ArrayBuffer to DataView or TypedArray to read and write binary data.

Buffer

In Node.js, Buffer is a special Uint8Array with some optimizations.

Convert within ArrayBuffer, DataView, TypedArray and Buffer

Conver within DOM, URL, File, ImageData and Buffer

Reference

• WangYuLue/image-conversion