Blob to ArrayBuffer
var blob = new Blob([data], {type: ‘text/plain‘}); var reader = new FileReader(); reader.onload = function(e) { callback(e.target.result); }; reader.readAsArrayBuffer(blob);
ArrayBuffer to Blob
var buffer = new ArrayBuffer(32); var blob = new Blob([buffer]); // 注意必须包裹[]
ArrayBuffer to Uint8
Uint8数组可以直观的看到ArrayBuffer中每个字节(1字节 == 8位)的值。一般我们要将ArrayBuffer转成Uint类型数组后才能对其中的字节进行存取操作。
var buffer = new ArrayBuffer(32); var u8 = new Uint8Array(buffer);
Uint8 to ArrayBuffer
我们Uint8数组可以直观的看到ArrayBuffer中每个字节(1字节 == 8位)的值。一般我们要将ArrayBuffer转成Uint类型数组后才能对其中的字节进行存取操作。
var uint8 = new Uint8Array(); var buffer = uint8.buffer;
Array to ArrayBuffer
var arr = [0x15,0xFF,0x01,0x00,0x34,0xAB,0x11]; var uint8 = new Uint8Array(arr); var buffer = uint8.buffer;
获取/设置ArrayBuffer对应的数值
一串ArrayBuffer是可以被“理解”为很多个值的,以下面这个值为例,
按照服务端的协议,这串数据流的格式如下:
1 unsign byte (1字节) + 1 unsign int (4字节) + 1 unsign short (2字节)
var arr = [0x01,0x02,0x00,0x00,0x00,0x00,0x03]; var u8 = new Uint8Array(arr); var ab = u8.buffer; console.log(ab); // ab为要解析的ArrayBuffer var u8 = new Uint8Array(ab, 0, 1); // (arraybuffer, 字节解析的起点, 解析的长度) var val_byte = u8[0]; console.log(val_byte); // 解析unsign int // 由于Uint32Array的解析起点必须是4的整数倍,而在流中该数据的起点是1,所以选择先“裁剪”(slice)出要解析的流片段,再用Uint32去解析该片段 var u32buff = ab.slice(1, 5); var u32 = new Uint32Array(u32buff); var val_uint = u32[0]; console.log(val_uint); // 解析unsign short var u16buff = ab.slice(5, 7); var u16 = new Uint16Array(u16buff); var val_short = u16[0]; console.log(val_short);
TypeArray to Array
function Uint8Array2Array(u8a) { var arr = []; for (var i = 0; i < u8a.length; i++) { arr.push(u8a[i]); } return arr; }
canvas转换为dataURL
var png = canvas.toDataURL(‘image/png‘); var jpg = canvas.toDataURL(‘image/jpeg‘, 0.8);
File、Blob对象转换为dataURL
File对象也是一个Blob对象,二者的处理相同。
function readBlobAsDataURL(blob, callback) { var a = new FileReader(); a.onload = function(e) {callback(e.target.result);}; a.readAsDataURL(blob); } //example: readBlobAsDataURL(blob, function (dataurl){ console.log(dataurl); }); readBlobAsDataURL(file, function (dataurl){ console.log(dataurl); });
dataURL转换为Blob对象
function dataURLtoBlob(dataurl) { var arr = dataurl.split(‘,‘), mime = arr[0].match(/:(.*?);/)[1], bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n); while(n--){ u8arr[n] = bstr.charCodeAt(n); } return new Blob([u8arr], {type:mime}); } //test: var blob = dataURLtoBlob(‘data:text/plain;base64,YWFhYWFhYQ==‘);
dataURL图片数据绘制到canvas
先构造Image对象,src为dataURL,图片onload之后绘制到canvas
var img = new Image(); img.onload = function(){ canvas.drawImage(img); }; img.src = dataurl;
File,Blob的图片文件数据绘制到canvas
还是先转换成一个url,然后构造Image对象,src为dataURL,图片onload之后绘制到canvas
利用上面的 readBlobAsDataURL 函数,由File,Blob对象得到dataURL格式的url,再参考 dataURL图片数据绘制到canvas
readBlobAsDataURL(file, function (dataurl){ var img = new Image(); img.onload = function(){ canvas.drawImage(img); }; img.src = dataurl; });
不同的方法用于构造不同类型的url (分别是 dataURL, objectURL(blobURL), filesystemURL)。这里不一一介绍,仅以dataURL为例。
filesystemURL不是指本地文件URL的形式(file:///….), 而是格式类似于 filesystem:http://... 的一种URL,支持沙盒文件系统的浏览器支持(目前仅Chrome)支持。
Canvas转换为Blob对象并使用Ajax发送
转换为Blob对象后,可以使用Ajax上传图像文件。
先从canvas获取dataurl, 再将dataurl转换为Blob对象
var dataurl = canvas.toDataURL(‘image/png‘); var blob = dataURLtoBlob(dataurl); //使用ajax发送 var fd = new FormData(); fd.append("image", blob, "image.png"); var xhr = new XMLHttpRequest(); xhr.open(‘POST‘, ‘/server‘, true); xhr.send(fd);
HTML5 Blob与ArrayBuffer、TypeArray和字符串String之间转换
1.将String字符串转换成Blob对象
//将字符串 转换成 Blob 对象 var blob = new Blob(["Hello World!"], { type: 'text/plain' }); console.info(blob); console.info(blob.slice(1, 3, 'text/plain'));
2.将TypeArray 转换成 Blob 对象
//将 TypeArray 转换成 Blob 对象 var array = new Uint16Array([97, 32, 72, 101, 108, 108, 111, 32, 119, 111, 114, 108, 100, 33]); //测试成功 //var blob = new Blob([array], { type: "application/octet-binary" }); //测试成功, 注意必须[]的包裹 var blob = new Blob([array]); //将 Blob对象 读成字符串 var reader = new FileReader(); reader.readAsText(blob, 'utf-8'); reader.onload = function (e) { console.info(reader.result); //a Hello world! }
ArrayBuffer转Blob
var buffer = new ArrayBuffer(32); var blob = new Blob([buffer]); // 注意必须包裹[]
3,将Blob对象转换成String字符串,使用FileReader的readAsText方法
//将字符串转换成 Blob对象 var blob = new Blob(['中文字符串'], { type: 'text/plain' }); //将Blob 对象转换成字符串 var reader = new FileReader(); reader.readAsText(blob, 'utf-8'); reader.onload = function (e) { console.info(reader.result); }
4.将Blob对象转换成ArrayBuffer,使用FileReader的 readAsArrayBuffer方法
//将字符串转换成 Blob对象 var blob = new Blob(['中文字符串'], { type: 'text/plain' }); //将Blob 对象转换成 ArrayBuffer var reader = new FileReader(); reader.readAsArrayBuffer(blob); reader.onload = function (e) { console.info(reader.result); //ArrayBuffer {} //经常会遇到的异常 Uncaught RangeError: byte length of Int16Array should be a multiple of 2 //var buf = new int16array(reader.result); //console.info(buf); //将 ArrayBufferView 转换成Blob var buf = new Uint8Array(reader.result); console.info(buf); //[228, 184, 173, 230, 150, 135, 229, 173, 151, 231, 172, 166, 228, 184, 178] reader.readAsText(new Blob([buf]), 'utf-8'); reader.onload = function () { console.info(reader.result); //中文字符串 }; //将 ArrayBufferView 转换成Blob var buf = new DataView(reader.result); console.info(buf); //DataView {} reader.readAsText(new Blob([buf]), 'utf-8'); reader.onload = function () { console.info(reader.result); //中文字符串 }; }