假如后端传过来一个
a.jpg
图片文件,但这个文件的数据类型是
ArrayBuffer
,想要用
URL.createObjectURL
展示图片,如何做到?
createObjectURL
函数的参数是
File
对象、
Blob
对象或者
MediaSource
对象。因此就要将
ArrayBuffer
转成这三者中的其一类型。
ArrayBuffer 转成 File 直接调用 new File 构造函数即可:
function bufToFile(buf, filename){
return new File([buf], filename);
File 函数的第一个参数是一个包含ArrayBuffer
,ArrayBufferView
,Blob
,或者 DOMString
对象的数组,第二个参数表示文件名称。
File 转成 ArrayBuffer 需要借助 FileReader
类。
function fileToBuf(file, cb){
var fr = new FileReader();
var filename = file.name;
fr.readAsArrayBuffer(file);
fr.addEventListener("loadend",(e) => {
var buf = e.target.result;
cb(buf, filename);
},false);
上面函数中,fr 是 FileReader 的实例,readAsArrayBuffer
可以读取指定的 Blob
或 File
内容,当读取完成后会触发 loadend
事件,同时 result
属性中将包含一个 ArrayBuffer
对象以表示所读取文件的数据。我们的 fileToBuf
接受一个回调,它接受 ArrayBuffer 和 filename 两个参数。
首先说一下 ArrayBuffer 转成 Blob。跟 ArrayBuffer 转成 File 很像。也是调用 new Blob
构造函数:
function bufToBlob(buf, mimeType = ""){
return new Blob([buf], { type: mimeType });
Blob 函数的第二个参数与 File 函数的第二个参数略有不同,Blob 是一个对象,对象中有一个 type 属性,默认值为 “”,它代表了将会被放入到blob中的数组内容的 MIME
类型。Blob 的第一个参数也是一个由 ArrayBuffer
, ArrayBufferView
, Blob
, DOMString
等对象构成的数组。
DOMString
是 DOM 字符串,比如:<a id="a"><b id="b">hey!</b></a>
。它的 type 则是:text/html
。
然后是 Blob 转成 ArrayBuffer。Blob 转成 ArrayBuffer 也是通过 FileReader 类进行转换。上面的 File 转 ArrayBuffer 我们稍微更改一下即可:
function blobToBuf(blob, cb){
var fr = new FileReader();
var type = blob.type;
fr.readAsArrayBuffer(blob);
fr.addEventListener("loadend",(e) => {
var buf = e.target.result;
cb(buf, type);
},false);
或者将两个函数写成一个,可以使用 Object.prototype.toString.call
作为判别依据。
File
对象其实是特殊类型的 Blob
,且可以用在任意的 Blob 类型的上下文中。比如说,FileReader
, URL.createObjectURL()
, createImageBitmap()
, 及 XMLHttpRequest.send()
都能处理 Blob
和 File
。File 接口也继承了 Blob 接口的属性。这两个东西互转感觉没必要,如果要转的话,可以利用 FileReader 作为桥梁,先转成 ArrayBuffer,然后在转成相应的 Blob 或者 File。
通过设置一个XMLHttpRequest 对象的 responseType 属性来改变一个从服务器上返回的响应的数据类型。可用的属性值为空字符串 (默认), “arraybuffer”, “blob”, “document”,“json” 和 “text”。比如后端如果发送的是一个二进制图像文件,在前端可以指定接受类型是 blob
,这样 response 数据将是 blob 类型的数据。
var xhr = new XMLHttpRequest();
xhr.open("GET", "/myfile.png", true);
xhr.responseType = "blob";
xhr.onload = function(oEvent) {
var blob = xhr.response;
xhr.send();
发送二进制文件到服务端的话,XMLHttpRequest
对象的send
方法已被增强,可以通过简单的传入一个ArrayBuffer
Blob
, 或者 File
对象来发送二进制数据。
有关 XMLHttpRequest
接受和发送二进制数据可以参考 MDN 上的文档:
发送和接收二进制数据
2.base64 转成blob 上传
function dataURItoBlob(dataURI) {
var byteString = atob(dataURI.split(',')[1]);
var mimeString = dataURI.split(
Blob,Uint8Array,ReadableStream,ArrayBuffer,JavaScript / TypeScript中的字符串的二进制转换器
npm i -S binconv
这是可用的转换器。命名规则: A → B应该是aToB() 。
Base64 → Uint8Array
base64ToUint8Array()
Blob → ArrayBuffer
blobToArrayBuffer()
Blob → ReadableStream
blobToReadableStream()
Blob → Uint8Array
blobToUint8Array()
ReadableStream → Blob
readableStreamToBlob()
ReadableStream → Uint8Array
readable
形象变戏法者
Web具有一些不错的图像处理功能,但API完全不一致。 另外,一些第三方库需要画布,其他一些则需要图像。 而且,如果您需要读入图像,则需要了解和 API的内在联系。
通过<input>标记接受图像文件,并将其作为图像附加到文档中。
var jug = require ( 'image-juggler' ) ;
var img = document . createElement ( 'img' ) ;
var input = document . querySelector ( 'input[type="file"]' ) ;
input . addEventListener ( 'change' , function ( e ) {
e . stopPropagation ( ) ;
var file = e . target . files [ 0 ]
在计算机中处理数据,最常用的数据类型就是字符串和二进制,字符串的处理是比较简单的,毕竟我们为类能看得懂,数据不对马上就能看出来,对 String 的处理方法也经常使用,不陌生。但是二进制数据是我们人类看不懂的数据,数据是否正确,不能一下子就看出来,略显陌生。在 JavaScript 中的经常用到的二进制的格式有三种:ArrayBuffer、Blob、File。在了解这三种二进制之前,先了解一个类 FileReader,这个类是用来读取计算上的文件的一个类,是用来读取二进制文件的类。
18.1 File类
File(文件)既能代表一个特定文件名称,又能代表一个目录下的一组文件的名称。如果是文件集,可以对此集合调用list()方法,返回一个字符数组。
18.1.1 目录列表器
查看一个文件目录的方法(使用File类):
f.isFile
<a v-if="isShowChromeTip">
<input ref="file" type='file' name="file" webkitdirectory @change.stop="changesData"/>