浏览器图片转换手册

介绍图片可以用很多不同类型的数据表示。本文将它们归纳为5种类型：DOM、URL、File、ImageData和Buffer。图像的数据类型DOM元素从URL（数据URL、HTTPURL或对象URL）加载图像。元素通过canvasAPIdrawImage获取元素上的图像数据。URLDataURLData带有base64编码图像数据的URL。图像的二进制数据可以从数据URL数据中解码出来。DataURL数据的大小比原始二进制数据稍大。HTTPURLHTTPURL表示存储在服务器上的图像。HTTPURL用于从服务器获取图像数据。ObjectURLObjectURL用于表示存储在浏览器内存中的File或Blob对象。ObjectURL可以通过createObjectURLAPI创建，通过revokeObjectURLAPI释放。文件BlobBlob是具有二进制数据的类文件对象。它包含一个只读大小属性和一个只读类型属性。可以通过slice、stream、text等方式读取二进制数据。FileFile对象是一种特殊的Blob对象。File对象除了Blob的属性和方法外，还包含lastModified、name等属性。ImageDataImageData对象是一个JavaScript对象，它包含宽度、高度和数据属性，分别表示图像宽度、高度和像素数据。data属性是一维数组，包含格式为R,G,B,A,R,G,B,A的数据。每个R,G,B,A代表一个像素。ImageData可以通过APIcreateImageData或ImageData构造函数创建。BufferArrayBufferArrayBuffer是在浏览器中访问二进制数据的唯一方式。ArrayBuffer表示图像的原始二进制数据缓冲区。我们不能读写ArrayBuffer，只能将ArrayBuffer转换成DataView或TypedArray来读写二进制数据。BufferBuffer是Node.js中一种特殊的Uint8Array，Node.js对其做了一些优化。ArrayBuffer、DataView、TypedArray和Buffer之间的转换DOM、URL、Blob(File)、ImageData和Buffer之间的转换参考WangYuLue/image-conversion