编码 data text html c,谁说前端不需要懂二进制
作者:全栈成长之路 公号 / 山月行
作为一名前端,在工作中也会遇到很多有关二进制处理的需求,如 EXCEL 表格的导出,PDF 的生成,多个文件的打包,音频的处理。
从前后端整体上来说前端代表 UI 层,它的外在表现是 human readable 的,而服务端代表数据层,所表现出来的是 machine readable。如果 EXCEL 以及 PDF 的处理交由服务端处理,服务端免不了要做一层格式化的逻辑处理,以便与前端保持一致。一来增加了复杂度,二来容易造成前端与服务器端的数据不一致。此时为了减少复杂度,工作量有可能都尽可能在浏览器端完成。
本篇文章总结了浏览器端的二进制以及有关数据之间的转化,如 ArrayBuffer,TypedArray,Blob,DataURL,ObjectURL,Text 之间的互相转换。为了更好的理解与方便以后的查询,特意做了一张图做总结。
二进制相互转换图
二进制相关数据类型
在介绍常见的二进制数据处理之前,先简单介绍下几种二进制相关的数据类型
ArrayBuffer && TypedArray
TypedArray 是 ES6+ 新增的描述二进制数据的类数组数据结构。但它本身不可以被实例化,甚至无法访问,你可以把它理解为 Abstract Class 或者 Interface。而基于 TypedArray,有如下数据类型:
Uint8ArrayUint 及 Unsigned Int 代表数组的每一项是无符号整型8 代表数据的每一项占 8 个比特位,即一个字节
Int8Array
Uint16Array
Int16Array
...
通过 Uint8Array,即可知道 Uint16Array,Int8Array 所代表的意义。
const array = new Int32Array([1, 2, 3])
// .length 代表数组的大小
// 3
array.length
// .btyeLength 代表数据所占字节大小
// 12
array.byteLength
ArrayBuffer 代表二进制数据结构,「并且只读」,需要转化为 TypedArray 进行写操作。
const array = new Int16Array([1, 2, 3])
// TypedArray -> ArrayBuffer
array.buffer
// ArrayBuffer -> TypedArray
new Int16Array(array.buffer)
// buffer.length 代表数据所占用字节大小
array.buffer.length === array.byteLength
连接多个 TypedArray
TypedArray 没有像数组那样的 Array.prototype.concat 方法用来连接多个 TypedArray。不过它提供了 TypedArray.prototype.set 可以用来间接连接字符串
❝可以参考 MDN 文档:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/TypedArray/set
❞
// 在位移 offset 位置放置 typedarray
typedarray.set(typedarray, offset)
原理就是先分配一块空间足以容纳需要连接的 TypedArray,然后逐一在对应位置叠加
function concatenate(constructor, ...arrays) {
let length = 0;
for (let arr of arrays) {
length += arr.length;
}
let result = new constructor(length);
let offset = 0;
for (let arr of arrays) {
result.set(arr, offset);
offset += arr.length;
}
return result;
}
concatenate(Uint8Array, new Uint8Array([1, 2, 3]), new Uint8Array([4, 5, 6]))
同时您还需要对资源的获取有大致的了解,如 XHR,fetch,通过文件上传。
Blob
Blob 是浏览器端的类文件对象。操作 Blob 需要使用数据类型 FileReader。
FileReader 有以下方法,可以把 Blob 转化为其它数据
FileReader.prototype.readAsArrayBuffer
FileReader.prototype.readAsText
FileReader.prototype.readAsDataURL
FileReader.prototype.readAsBinaryString
const blob = new Blob('hello'.split(''))
// 表示文件的大小
blob.size
const array = new Uint8Array([128, 128, 128])
const blob2 = new Blob([array])
function readBlob (blob, type) {
return new Promise(resolve => {
const reader = new FileReader()
reader.onload = function (e) {
resolve(e.target.result)
}
reader.readAsArrayBuffer(blob)
})
}
readBlob(blob, 'DataURL').then(url => console.log(url))
数据输入
数据输入或者叫资源的请求可以分为以下两种途径
通过 url 地址请求网络资源
通过文件上传请求本地资源
fetch
fetch 应该是大家比较熟悉的,但大多使用环境比较单一,一般用来请求 json 数据。其实, 「它也可以设置返回数据格式为 Blob 或者 ArrayBuffer。」
fetch 返回一个包含 Response 对象的 Promise,Response 有以下方法
Response.prototype.arrayBuffer
Response.prototype.blob
Response.prototype.text
Response.prototype.json
❝详情可以查看 MDN 文档 https://developer.mozilla.org/en-US/docs/Web/API/Response
❞
fetch('/api/ping').then(res => {
// true
console.log(res instanceof Response)
// 最常见的使用
return res.json()
// 返回 Blob
// return res.blob()
// 返回 ArrayBuffer
// return res.arrayBuffer()
})
另外,万能的 Response API 既可以可以使用 TypedArray,Blob,Text 作为输入,又可以使用它们作为输出。
「这意味着关于这三种数据类型的转换完全可以通过 Response」
xhr
「xhr 可以设置 responseType 接收合适的数据类型」
const request = new XMLHttpRequest()
request.responseType = 'arraybuffer'
request.responseType = 'blob'
File
本地文件可以通过 input[type=file] 来上传文件。
当上传成功后,可以通过 document.getElementById('input').files[0] 获取到上传的文件,即一个 File 对象,它是 Blob 的子类,可以通过 FileReader 或者 Response 获取文件内容。
数据输出
或者叫数据展示或者下载,数据经二进制处理后可以由 url 表示,然后通过 image, video 等元素引用或者直接下载。
Data URL
Data URL 即 Data As URL。所以, 「如果资源过大,地址便会很长。」 使用以下形式表示。
data:[][;base64],
先来一个 hello, world。把以下地址粘入地址栏,会访问到 hello, world
data:text/html,
Hello%2C%20World!
Base64 编码与解码
Base64 使用大小写字母,数字,+ 和 / 64 个字符来编码数据,所以称为 Base64。经编码后,文本体积会变大 1/3
在浏览器中,可以使用 atob 和 btoa 编码解码数据。
// aGVsbG8=
btoa('hello')
Object URL
可以使用浏览器新的 API URL 对象生成一个地址来表示 Blob 数据。
// 粘贴生成的地址,可以访问到 hello, world
// blob:http://host/27254c37-db7a-4f2f-8861-0cf9aec89a64
URL.createObjectURL(new Blob('hello, world'.split('')))
下载
data:application/octet-stream;base64,5bGx5pyI
资源的下载可以利用 FileSaver[1] 。
这里也简单写一个函数,用来下载一个链接
function download (url, name) {
const a = document.createElement('a')
a.download = name
a.rel = 'noopener'
a.href = url
// 触发模拟点击
a.dispatchEvent(new MouseEvent('click'))
// 或者 a.click(
}
二进制数据转换
二进制数据转换
以上是二进制数据间的转换图,有一些转换可以直接通过 API,有些则需要代码,以下贴几种常见转换的代码
String to TypedArray
根据上图,由字符串到 TypedArray 的转换,可以通过 「String -> Blob -> ArrayBuffer -> TypedArray」 的途径。
关于代码中的函数 readBlob 可以回翻环节 数据类型 - Blob[2]
const name = '山月'
const blob = new Blob(name.split(''))
readBlob(blob, 'ArrayBuffer').then(buffer => new Uint8Array(buffer))
也可以通过 Response API 直接转换 「String -> ArrayBuffer -> TypedArray」
const name = '山月'
new Response(name).arrayBuffer(buffer => new Uint8Array(buffer))
这上边两种方法都是直接通过 API 来转化,如果你更像了解如何手动转换一个字符串和二进制的 TypedArray
String to TypedArray 2
使用 enodeURIComponent 把字符串转化为 utf8,再进行构造 TypedArray。
function stringToTypedArray(s) {
const str = encodeURIComponent(s)
const binstr = str.replace(/%([0-9A-F]{2})/g, (_, p1) => {
return String.fromCharCode('0x' + p1)
})
return new Uint8Array(binstr.split('').map(x => x.charCodeAt(0)))
}
实践
1. 如何上传本地图片并在网页上展示
由以上整理的转换图得出途径
本地上传图片 -> Blob -> Object URL
2. 如何拼接两个音频文件
由以上整理的转换图得出途径
fetch请求音频资源 -> ArrayBuffer -> TypedArray -> 拼接成一个 TypedArray -> ArrayBuffer -> Blob -> Object URL
3. 如何把 json 数据转化为 demo.json 并下载文件
json 视为字符串,由以上整理的转换图得出途径
Text -> DataURL
除了使用 DataURL,还可以转化为 Object URL 进行下载。关于下载的函数 download,可以参考以上环节 数据输出-下载[3]
Text -> Blob -> Object URL
可以把以下代码直接粘贴到控制台下载文件
const json = {
a: 3,
b: 4,
c: 5
}
const str = JSON.stringify(json, null, 2)
// 方案一:Text -> DataURL
const dataUrl = `data:,${str}`
download(dataUrl, 'demo.json')
// 方案二:Text -> Blob -> ObjectURL
const url = URL.createObjectURL(new Blob(str.split('')))
download(url, 'demo1.json')
编码 data text html c,谁说前端不需要懂二进制相关推荐
- 编码 data:text/html;c,[网页设计]图片base64编码利器:在线 Data URI 生成工具 – Duri.me...
这篇文章介绍一款在线的图片 base64 编码利器 - Duri.me.data URI 图片是 base64编码的图片文件,可以嵌入到 HTML 或者 CSS 文件中,能够减少 HTTP 请求,提高 ...
- 编码 data:text/html;c,关于 Data URI Scheme -- data:image/jpg;base64
转载一篇大神的文章 大家可能注意到了,网页上有些图片的src或css背景图片的url后面跟了一大串字符,比如: data:image/jpeg;base64,/9j/4QAYRXhpZgAASUkqA ...
- 编码 data:text/html;c,javascript中Data URI使用详解
Data URI,不是URL URL是uniform resource locator的缩写,在web中的每一个可访问资源都有一个URL地址,例如图片,HTML文件,js文件以及style sheet ...
- -32767转化为二进制_谁说前端不需要懂二进制
(给前端大全加星标,提升前端技能) 作者:全栈成长之路 公号 / 山月行 作为一名前端,在工作中也会遇到很多有关二进制处理的需求,如 EXCEL 表格的导出,PDF 的生成,多个文件的打包,音频的处理 ...
- 编码 data:text/html;c,iOS 用TFHpple抓取GB-2312编码的html页面,页面返回编码错误
HTMLParser方法可以参考https://github.com/zootreeves/Objective-C-HMTL-Parser TFHpple方法的使用可以看https://github. ...
- data:text/html firefox钓鱼,JS DataURL 整理(一)
一.初识Data URL 数据URL是带有前缀的URL,data:可以将小文件直接嵌入文档中. data URL是一种特殊格式的url,它的前缀是data: data URL允许内容的创建者将小文件嵌 ...
- data:text/html;c,html image -- data:image/png;base64
1, data:image/png;base64 能够把上面 src 中的url 直接copy到浏览器地址栏中. Data URI scheme是在RFC2397中定义的.目的是将一些小的数据.直接 ...
- 微信浏览器中iframe srcdoc、src=data:text/html,xxxx 等无法使用情况下防止样式污染的解决方案
业务需求 从后端取HTML 前端展示 要求 HTML不得被前台全局样式污染 解决方案 1.使用iframe 的 srcdoc <iframe srcdoc="<p>这是HT ...
- data:text/html html contenteditable,contentEditable
contentEditable 语音 编辑 锁定 讨论 上传视频 本词条缺少概述图,补充相关内容使词条更完整,还能快速升级,赶紧来编辑吧! contentEditablehtml中的一个属性.设置ht ...
最新文章
- python测试框架untest怎么循环执行_Python自动化测试-Unittest单元测试框架详解
- 常用的meta标签总结
- 安装百分之80卡住_石家庄铜铝80*80散热器品牌
- php怎么给页面链接,怎么给一个PHP密码访问页面加超链接
- 字节AI LAB NLP算法二面凉+被捞后通过
- [转载] 七龙珠第一部——第086话 打进前八强
- 高考语文再现奇葩作文题!大数据分析高考作文,看看哪年最坑爹?
- hdfs读写流程_必须掌握的分布式文件存储系统—HDFS
- 基础02Random类、ArrayList类
- python中字符串转元组时的小技巧
- golang笔记14--go 语言爬虫实战项目介绍
- 论项目整体管理-软考论文整理一
- 如何求复数的模用计算机,Excel怎么计算复数? Excel对复数进行加减乘除指数对数模的教程...
- [树形DP]贪吃的九头龙
- Fiori学习:WEBIDE本地个人版安装
- 解决——U盘格式化为NTFs之后,显示不了U盘
- 【mac】nvm 的安装和使用,解决mac重启node not found,每次都得source ~/.bash_profile
- 各类国外软件国内下载镜像合集
- linux三维动画软件,Blender2.9免费版下载
- (Unity游戏开发)五天时间做出一款饥荒类的生存游戏Demo,项目在手,还怕面试官不给offer?
热门文章
- 网站免费空间和服务器的区别,网站空间和服务器的区别
- MyBatis 配置文件 用户密码加密存储
- Linux下搭建 kafka集群 + zookeeper集群部署 安装、启动、停止
- 工作流实战_06_flowable 流程定义的删除
- IDEA创建工程时 报错 Initialization failed for 'https://start.spring.io'
- 在linux下搭建mysql数据库(以linux 版本Ubuntu18.04为例进行讲解)
- php validate form,laravel 中validate验证规则 利用FormRequest进行数据验证
- mybatis源码深度解析_30天消化MyBatis源码解析笔记,吊打面试官,offer接到手软
- QGraphicsView加入到布局,所在的窗口变大,视图和场景都变大,使场景中的矩形也变大
- C语言 void 指针 - C语言零基础入门教程