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
