JavaScript涉及二进制的转换方式
作者：qq_42372534
这篇文章主要介绍了JavaScript涉及二进制的转换方式，具有很好的 参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
ArrayBuffer <==> String字符串(utf-8)
new TextEncoder().endoce()new TextDecoder().decode()
/**
* arraybuffer转字符串
* @param {*} buffer ArrayBuffer
* @param {*} decodeType 编码格式
* @returns 字符串
*/
function ab2str(buffer, decodeType = "utf-8") {
// 默认是uft-8格式
let decoder = new TextDecoder(decodeType);
return decoder.decode(buffer);
}
/**
* 字符串 转 ArrayBuffer
* @param {*} str 字符串
* @returns ArrayBuffer
*/
function str2ab(str) {
let encoder = new TextEncoder();
return encoder.encode(str);
}
let str = ab2str(new Uint8Array([97]));
console.log(str); //''a'的ascii编码是97
let ab = str2ab(str);
console.log(ab); //Uint8Array(1) [ 97 ]ArrayBuffer <==> TypedArray
new Uint8Array(buffer)typedArray.buffer
let buffer = new ArrayBuffer(8); let ui8Array = new Uint8Array(buffer); console.log(ui8Array.buffer);
ArrayBuffer <==> DataView
new DataView(buffer)dataview.getUint8()
let buffer = new ArrayBuffer(8); let dv = new DataView(buffer); dv.setUint8(0, 16); console.log(dv.getUint8(0)); //16
String字符串 <==> Base64字符串
- btoa(),编码
- atob(),解码
let base64Str = btoa("hello world");
let str = atob(base64Str);
console.log(base64Str); //aGVsbG8gd29ybGQ=
console.log(str); //hello worldBase64字符串 <==> Base64源数据的ArrayBuffer
通过atob()解码,以及charCodeAt来获取每一个能被编码成base64的字符(都是1个字节)的对应的8位bit
function base64ToArrayBuffer(base64) {
let str = atob(base64); // 将base64解码成源二进制数据,可以被base64编码的字符都是latin-1字符,1个字节,所以可以使用charCodeAt()返回来的utf-16b编码设置,低字节就是0x00-0x7F,设置给Uint8Array时,保存低位,舍弃高位
let buffer = new ArrayBuffer(str.length); //以str的长度new 一个缓冲区
let ui8Arr = new Uint8Array(buffer);
for (let i = 0; i < ui8Arr.length; i++) {
//循环赋值每个字符对应的unicode值,存8位
ui8Arr[i] = str.charCodeAt(i);
}
return ui8Arr.buffer;
}Blob
Blob() 构造函数返回一个新的 Blob 对象。 blob的内容由参数数组中给出的值的串联组成
var aBlob = new Blob( array, options );
var aFileParts = ['<a id="a"><b id="b">hey!</b></a>']; // 一个包含DOMString的数组
var oMyBlob = new Blob(aFileParts, {type : 'text/html'}); // 得到 blobarray 是一个由ArrayBuffer, ArrayBufferView, Blob, DOMString 等对象构成的 Array ，或者其他类似对象的混合体，它将会被放进 Blob。DOMStrings会被编码为UTF-8.
options ,字典,两个属性:
- type，默认值为 “”，它代表了将会被放入到blob中的数组内容的MIME类型。- endings，默认值为"transparent"，用于指定包含行结束符\n的字符串如何被写入。
Blob属性
Blob.size只读,Blob 对象中所包含数据的大小（字节）。Blob.type只读,一个字符串，表明该 Blob 对象所包含数据的 MIME 类型。如果类型未知，则该值为空字符串。Blob.slice([start[, end[, contentType]]]),返回一个新的 Blob 对象，包含了源 Blob 对象中指定范围内的数据Blob.text(),返回一个promise且包含blob所有内容的UTF-8格式的 USVString。Blob.arrayBuffer()返回一个promise且包含blob所有内容的二进制格式的 ArrayBuffer
Blob,File<==> ArrayBuffer,data:格式的base64字符串,String
Blob
blob.arrayBuffer(),返回resolve arrayBuffer的promiseblob.text(),返回resolve string 的promise
FileReader
FileReader, 读取Blob或者File,可以生成ArrayBuffer,base64字符串,文本reader.readAsArrayBuffer(blob),读取完成后,reader.result 属性中将包含一个 ArrayBuffer 对象以表示所读取文件的数据reader.readAsDataURL(), 读取完成后,reader.result 属性将包含一个data:URL格式的字符串（base64编码）以表示所读取文件的内容。reader.readAsText(blob,encodeType),读取完成后,reader.result 属性将包含一个utf-8格式的字符串以表示所读取文件的内容。reader.onload事件表示读取完成,在这里获取数据
function readBlob(blob, type) {
return new Promise((resolve) => {
const reader = new FileReader();
switch (type) {
case "ArrayBuffer":
// arraybuffer
reader.readAsArrayBuffer(blob);
break;
case "Text":
// string
reader.readAsText(blob, "utf-8");
break;
case "DataURL":
// DataURL,data:<mime-type>;base64,....
reader.readAsDataURL(blob);
break;
}
reader.onload = function () {
resolve(reader.result);
};
});
}
let blob = new Blob(["hello wolrd"]);
readBlob(blob, "ArrayBuffer").then(console.log);
// [104, 101, 108, 108, 111, 32, 119, 111, 114, 108, 100];
readBlob(blob, "Text").then(console.log);
//hello wolrd
readBlob(blob, "DataURL").then(console.log);
// data:application/octet-stream;base64,aGVsbG8gd29scmQ=File <==> Blob
File对象的来源有
1.构造函数,new(fileBits: BlobPart[], fileName: string, options?: FilePropertyBag),其中BlobPart可以是String,ArrayBuffer,Blob
2.通过type=file的input选择文件
Blob对象的来源有:
1.构造函数,new Blob(array,option),array 是一个由ArrayBuffer, ArrayBufferView, Blob, DOMString 等对象构成的 Array ，或者其他类似对象的混合体，它将会被放进 Blob。DOMStrings会被编码为UTF-8。
2.http返回的数据
3.file.slice()
4.blob.slice()
let file = new File([blob],'foo.png',{
type:'image/png'
})
let blob = new Blob([file],{type:'image/png'})objectURL与Blob
ObjectURL格式:
blob:http://127.0.0.1:5500/d776d625-763d-40ca-a4fd-828968f93ec1
URL.revokeObjectURL(blob)
objectURL可以作为a标签的href属性的值,a.click()则可以实现下载,也可以作为img.src
let blob = new Blob([JSON.stringify({ foo: "bar" })], {
type: "application/json",
});
// 下载文件
function download(data) {
const a = document.createElement("a");
const blob = new Blob([data]);
const url = URL.createObjectURL(blob);
// 下载
a.href = url;
a.download = "我是下载文件名.txt"; //文件名
a.click();
// 释放blobURL
URL.revokeObjectURL(url);
}
download(blob);DataURL与Blob,File
格式:data:< mime-type >;base 64,…
该格式可以base64字符串可以直接赋值给img.src,显示图片
Blob生成DataURL
通过FileReader的readAsDataURL
let blob = new Blob(["hello world"]);
let reader = new FileReader();
reader.readAsDataURL(blob);
reader.onload = function () {
console.log(reader.result);
//data:application/octet-stream;base64,aGVsbG8gd29ybGQ=
};Canvas与ImageData,DataURL
canvas.toDataURL(type, encoderOptions)
返回一个包含图片展示的 data URI
type可选,图片格式，默认为 image/pngencoderOptions可选,在指定图片格式为 image/jpeg 或 image/webp的情况下，可以从 0 到 1 的区间内选择图片的质量
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
const image = new Image();
image.src = "./file/pic1.jpg";
image.onload = function () {
// drawImage(imgElement,x,y)
// 将图片画到canvas上
ctx.drawImage(image, 0, 0);
// canvas.toDataURL()
// 将canvas转成DataURL,
const dataUrl = canvas.toDataURL("image/png");
const img = document.createElement("img");
img.src = dataUrl;
document.body.appendChild(img);
};canvas.toBlob(callback,type?,quality?)
callback,获取到blob的回调函数type, 默认是image/png,指定图片格式quality: 0-1,决定图片质量
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
ctx.fillStyle = "skyblue";
ctx.fillRect(50, 50, 100, 100);
// canvas画布转blob
canvas.toBlob(handleBlob, "image/png");
// 下载blob
function handleBlob(blob) {
const url = URL.createObjectURL(blob);
const a = document.createElement("a");
a.download = "img.png";
a.href = url;
a.click();
}context.getImageData()
返回一个ImageData对象，用来描述canvas区域隐含的像素数据，这个区域通过矩形表示，起始点为(sx, sy)、宽为sw、高为sh
语法:
ImageData ctx.getImageData(sx, sy, sw, sh);
context.putImageData()
是 Canvas 2D API 将数据从已有的 ImageData 对象绘制到位图的方法。
语法:// dx:在画布的x轴偏移量,dy同理 // dirtyX: 要绘制imageData的起点x偏移量, // dirtyWidth: 要绘制的imageData的宽度 void ctx.putImageData(imagedata, dx, dy); void ctx.putImageData(imagedata, dx, dy, dirtyX, dirtyY, dirtyWidth, dirtyHeight);
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。