V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
推荐关注
Meteor
JSLint - a JavaScript code quality tool
jsFiddle
D3.js
WebStorm
推荐书目
JavaScript 权威指南第 5 版
Closure: The Definitive Guide
vivaxy
V2EX  ›  JavaScript

浏览器图像转换手册

  •  2
     
  •   vivaxy · 2019-11-09 10:52:26 +08:00 · 3256 次点击
    这是一个创建于 1601 天前的主题,其中的信息可能已经有所发展或是发生改变。

    介绍

    图像可以用多种不同的类型数据表示,本文将它们归纳为 5 种类型:DOM,URL,FileImageData 和 Buffer。

    图像的数据类型

    DOM

    <img>

    <img> 元素从 URL ( Data URL,HTTP URL 或 Object URL )加载图像。

    <canvas>

    <canvas> 元素通过 canvas API drawImage 来获取 <img> 元素上的图像数据。

    URL

    Data URL

    Data URL 带有 base64 编码的图像数据。可以从 Data URL 数据中解码出图像的二进制数据。Data URL 数据的大小比原始的二进制数据大一些。

    HTTP URL

    HTTP URL 代表存储在服务器上的图像。HTTP URL 用于从服务器获取图像数据。

    Object URL

    Object URL 用来代表存储在浏览器内存中的 FileBlob 对象。Object URL 可以由createObjectURL API 来创建,并由 revokeObjectURL API 释放。

    文件

    Blob

    Blob 是带有二进制数据的类文件对象。它包含一个只读的 size 属性和一个只读的 type 属性。你可以通过 slicestreamtext 等方法来读取二进制数据。

    File

    一个 File 对象是一个特殊的 Blob 对象。除了 Blob 的属性和方法外,File 对象还包含 lastModifiedname 等属性。

    ImageData

    一个 ImageData 对象是一个 JavaScript 对象,包含 widthheightdata 属性,分别表示图像宽度,高度和像素数据。 data 属性是一个一维数组,包含 R,G,B,A,R,G,B,A 这样格式的数据。每个 R,G,B,A 代表一个像素。可以通过 <canvas> API createImageDataImageData 构造函数来创建 ImageData

    Buffer

    ArrayBuffer

    ArrayBuffer 是在浏览器中唯一一种访问二进制数据的方法。ArrayBuffer 代表图像的原始二进制数据缓冲区。我们无法读取和写入 ArrayBuffer ,只能将 ArrayBuffer 转换为 DataViewTypedArray 来读取和写入二进制数据。

    Buffer

    Buffer 是 Node.js 中特殊的一种 Uint8Array,Node.js 对其进行了一些优化。

    ArrayBufferDataView,TypedArray 和 Buffer 之间转换

    如何在 ArrayBuffer,DataView,TypedArray 和 Buffer 之间转换

    在 DOM,URL,Blob(File),ImageData 和 Buffer 之间转换

    如何在 DOM,URL,Blob(File),ImageData 和 Buffer 之间转换

    参考资料

    4 条回复    2019-11-23 08:36:43 +08:00
    dioxide
        1
    dioxide  
       2019-11-09 14:17:19 +08:00
    喜欢这种小结, 实用
    molvqingtai
        2
    molvqingtai  
       2019-11-10 11:24:24 +08:00
    总结得很好,赞
    Epsil0n9
        3
    Epsil0n9  
       2019-11-10 19:38:47 +08:00
    請教一下這個簡潔的繪製關係圖的工具是什麽?
    vivaxy
        4
    vivaxy  
    OP
       2019-11-23 08:36:43 +08:00
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   3238 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 26ms · UTC 12:06 · PVG 20:06 · LAX 05:06 · JFK 08:06
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.