有趣的 JavaScript 格式转换

fireflow 发布于2019-08-26 10:19 / 1895人阅读

摘要：位无符号整数，长度个字节，溢出处理为最大值。所以你拿到的英文字母编码前后一样的，但是汉字等字符就不同了。为了直接得到汉字的码，使用其实还可以选择使用处理汉字，但是英文又不能正常转换了。

原文链接：https://ssshooter.com/2019-04...

之前做文件上传和 canvas 修图时接触到几个格式，这里打算整理一下他们的关系

Blob

使用 input 获取文件时，你拿到的就是 file 对象，而 file 继承于 blob，所以直接讲比较陌生的 blob 吧。

BLOB (binary large object)，二进制大对象，是一个可以存储二进制文件的“容器”。

Blob 有什么用

使用 Blob 可以让你在浏览器生成一个临时文件，使用 URL.createObjectURL() 获取他的链接，你就能像服务器文件一样使用他。

let temp = new Blob(["hello fantasy"])
URL.createObjectURL(temp)
// 返回 "blob:https://ssshooter.com/1bf84bba-b53a-4155-8348-33a487e8ab7e"

返回的 url 前面是主机，后面是一个唯一识别码。

在创建这个临时文件后，只要不关闭当前页面，这个文件就会一直存在于内存，你需要主动运行 URL.revokeObjectURL(url) 删除引用。

从 Blob 中提取数据

在控制台打出 blob 你根本不知道里面是啥，那么怎么读取 blob 呢？

借助 FileReader，你可以把 Blob 读取为 Buffer。

FileReader 对象允许 Web 应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容，使用 File 或 Blob 对象指定要读取的文件或数据。

var reader = new FileReader()
reader.addEventListener("loadend", function() {
  // reader.result 包含转化为类型数组的blob
})
reader.readAsArrayBuffer(blob)

ArrayBuffer

经过 FileReader 的读取，你能看到计算机储存数据的本质 —— 二进制数据。

ArrayBuffer 的编辑

ArrayBuffer 类似数组，每一格放入 1Byte（8bit）数据，也就是八位的 0 或 1，所以换成十进制一格最大是 255.

例如：

ArrayBuffer 不能直接操作，而是要通过类型数组对象（下面列出来的）或 DataView 对象来操作，它们会将缓冲区中的数据表示为特定的格式，并通过这些格式来读写缓冲区的内容。

Int8Array：8 位有符号整数，长度 1 个字节，溢出处理为数值%（取模）255。

Uint8Array：8 位无符号整数，长度 1 个字节。

Uint8ClampedArray：8 位无符号整数，长度 1 个字节，溢出处理为 255（最大值）。

Int16Array：16 位有符号整数，长度 2 个字节。

Uint16Array：16 位无符号整数，长度 2 个字节。

Int32Array：32 位有符号整数，长度 4 个字节。

Uint32Array：32 位无符号整数，长度 4 个字节。

Float32Array：32 位浮点数，长度 4 个字节。

Float64Array：64 位浮点数，长度 8 个字节。

对应视图的转换还很神奇的，ArrayBuffer 是一个格子 8 位，也就是跟 xx8Array 是一样的，自然不用转换，而 16 之后的都是把每几个格子合成一个。

// 创建 buffer
ab = new ArrayBuffer(4)
// 创建视图
a = new Uint8Array(ab)
// 通过视图操作 buffer
a[0] = 2
a[1] = 25
a[2] = 31
a[2] = 233

打印 ab 会输出：

为了方便理解他们如何转换，我把他转为 2 进制：

// Int16Array
;["1100100000010", "11101001"]
// Int32Array
;["111010010001100100000010"]
// Uint8Array
;["10", "11001", "11101001", "0"]

可能还没能看出来？那再在前面补 0：

// Int16Array
;["0001100100000010", "0000000011101001"]
// Int32Array
;["00000000111010010001100100000010"]
// Uint8Array
;["00000010", "00011001", "11101001", "00000000"]

这就很明显能看出：要转换就要在分组之后把同一组数据从右到左拼接。

不过我自觉一般不太会用到这么细致的 bit 操作（

canvas 与 buffer

另外，canvas 可以通过 ctx.createImageData() 得到 ImageData。

ImageData.data 就是一个 Uint8ClampedArray，里面顺序放着图片每一个像素的 rgba 值。你可以对这个 Uint8ClampedArray 进行一系列操作，再用 canvas.toBlob 这个 buffer 变回 Blob，就完成了图片编辑的操作。

通过这个操作，再结合一些卷积核相关知识，就能完成类似这个卷积核图片修改器的功能。

Data Url

Data Url 是一个前缀为 data: 的协议，你可以借助这个协议在文档中嵌入一些小文件（最常见就是内联图片了），数据格式如下：

data:[][;base64],

mediatype 填入MIME 类型，MIME 也用于服务器返回数据时指定数据类型；base64 是一种编码方式；后面接着就是数据本体。

几个例子：

普通文字：data:,Hello%2C%20World!

base64 处理的文字：data:text/plain;base64,SGVsbG8sIFdvcmxkIQ%3D%3D

html 文档：data:text/html,%3Ch1%3EHello%2C%20World!%3C%2Fh1%3E

执行 script 的 html 文档：data:text/html,

base64

上面提到的 base64 不算是一种加密算法，它只是简单地将每 3 个 8bit 字符转换为 4 个 6Bit 字符（base64 只有 2^6 = 64 种字符，因此得名），这样保证了传输中必定使用 ASCII 中可见字符，不会出奇怪的空白字符或是功能性标志。

由于是 3 个字符变 4 个，那么很明显了，base64 编码后，编码对象的体积会变成原来的 4/3 倍。

特别要注意的是如果 bit 数不能被 3 整除，需要在末尾添加 1 或 2 个 byte（8 或 16bit），并且末尾的 0 不使用 A 而使用 =，这就是为什么 base64 有的编码结果后面会有一或两个等号。

喜闻乐见的举例时间：

前置知识点：utf8 与 unicode 的关系

你可以使用 charCodeAt() 获取一个字符的 unicode 编码（0 到 65535 之间的整数），但是 unicode 只是一个码表，并不是一个具体的编码方式，utf8 才是。所以你拿到的英文字母编码前后一样的，但是汉字（等字符）就不同了。

为了直接得到汉字的 utf8 码，使用 TextEncoder（其实还可以选择使用 encodeURIComponent 处理汉字，但是英文又不能正常转换了）。

下面用 JavaScript 简单写个 base64 转换流程：

var b64 = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/"
Array.from(new TextEncoder().encode("碧蓝幻想"))
  .map(val => val.toString(2).padStart(8, 0)) // 转二进制，补充到八位
  .join("")
  .replace(/([10]{6})/g, "$1,") // 每六位插个逗号用于拆分
  .split(",") // 拆分为每 6 位一组
  .map(val => parseInt(val.padEnd(6, 0), 2)) // 补充后面的 0（但是没有补够）
  .map(val => b64[val])
  .join("")

结果基本是对的，但是后面的 = 还是用了普通的 A 而且位数没有加够，所以上面转换出来的不是标准 base64，仅供参考

base64 算法参考

blob url 与 Data Url 对比

blob url

不需要做编码，省了运算资源

大小也不会改变

在不使用时需要手动删除引用

关闭页面链接自动废弃

Data Url

需要编码，且体积变大 1.3 倍

容易删除

链接不变，保存了可以以后使用

参考

mdn Blob

mdn FileReader

mdn HTMLCanvasElement

阮一峰 ES6 arraybuffer

进阶 FileAPI 实现标准

javascript info - blob

附录 N 进制数的表示方法

// 10
var a = 10
// 8
var b = 0o1234567
// 或直接在前面加0，如果后面数字都小于8就自动变成8进制
var c = 01234567
// 2
var d = 0b1010101110101
// 16
var e = 0xe87a90

N 进制数转 10 进制

parseInt(0o1234567, 8)
parseInt(0b1010101110101, 2)
parseInt(0xe87a90, 16)

10 进制数转 N 进制

;(123456).toString(2)
;(123456).toString(8)
;(123456).toString(16)

idc机房托管服务器托管 php语言的格式转换免费转换视频格式的软件免费的视频格式转换软件可以转换视频格式的软件

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/105969.html

[译] 5 个有趣的 Linux 命令行技巧

摘要：图个命令行技巧我们开始一个新的系列，在这里我们还会写一些技巧，并且用尽量小的篇幅写清楚。我们可以使用命令来查看曾经运行过的命令。这里是一个命令的示例输出。入门者可能有命令行恐惧症，下面的命令会随机显示一个手册页。你有将Linux物尽其用吗？对很多Linux用户来说，有很多看起来是技巧的有用特性。有些时候你会需要这些技巧。本文会帮助你更好得使用一些命令，发挥其更强大的功能。 showI...

AdolphLWQ 2019-06-25 13:20 评论0 收藏0
[译] 5 个有趣的 Linux 命令行技巧

摘要：图个命令行技巧我们开始一个新的系列，在这里我们还会写一些技巧，并且用尽量小的篇幅写清楚。我们可以使用命令来查看曾经运行过的命令。这里是一个命令的示例输出。入门者可能有命令行恐惧症，下面的命令会随机显示一个手册页。你有将Linux物尽其用吗？对很多Linux用户来说，有很多看起来是技巧的有用特性。有些时候你会需要这些技巧。本文会帮助你更好得使用一些命令，发挥其更强大的功能。 showI...

wudengzan 2019-05-29 18:09 评论0 收藏0
JavaScript的Source Map (sourceURL / sourceMappingUR

摘要：常见的源码转换，主要是以下三种情况压缩，减小体积。该项是一个数组，表示可能存在多个文件合并。第一层是行对应，以分号表示，每个分号对应转换后源码的一行。在这个位中，左边的第一位最高位表示是否连续。这两天完成了自己的个人任务，准备学习一下前辈们的经验教训，在项目组的文档中发现了一个要求注意的点，如下： Js文件的开头可以加上类似//@ sourceURL=jquery.extends.j...

renweihub 2019-08-21 16:02 评论0 收藏0
[译] 11个无用而有趣的Linux终端彩蛋

摘要：但是这是世界最被人熟知的彩蛋之一。更有趣的是将应用到上。将吃豆人放入这里有一个只为爱好者准备的彩蛋。和会为此骄傲的。这会显示一个完整的或者，还包括乘客车厢。这里有一些很酷的Linux终端彩蛋，其中的每一个看上去并没有实际用途，但很有趣。 showImg(https://segmentfault.com/img/remote/1460000004848557); 只工作不玩耍…… 当我...

yuanxin 2019-06-25 13:21 评论0 收藏0
[译] 11个无用而有趣的Linux终端彩蛋

摘要：但是这是世界最被人熟知的彩蛋之一。更有趣的是将应用到上。将吃豆人放入这里有一个只为爱好者准备的彩蛋。和会为此骄傲的。这会显示一个完整的或者，还包括乘客车厢。这里有一些很酷的Linux终端彩蛋，其中的每一个看上去并没有实际用途，但很有趣。 showImg(https://segmentfault.com/img/remote/1460000004848557); 只工作不玩耍…… 当我...

mmy123456 2019-05-29 18:09 评论0 收藏0