JavaScript涉及二進(jìn)制的轉(zhuǎn)換方式
更新時間：2023年06月17日 09:52:27 作者：qq_42372534
這篇文章主要介紹了JavaScript涉及二進(jìn)制的轉(zhuǎn)換方式，具有很好的 參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
ArrayBuffer <==> String字符串(utf-8)
new TextEncoder().endoce()new TextDecoder().decode()
/**
?* arraybuffer轉(zhuǎn)字符串
?* @param {*} buffer ArrayBuffer
?* @param {*} decodeType 編碼格式
?* @returns 字符串
?*/
function ab2str(buffer, decodeType = "utf-8") {
? // 默認(rèn)是uft-8格式
? let decoder = new TextDecoder(decodeType);
? return decoder.decode(buffer);
}
/**
?* 字符串 轉(zhuǎn) 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源數(shù)據(jù)的ArrayBuffer
通過atob()解碼,以及charCodeAt來獲取每一個能被編碼成base64的字符(都是1個字節(jié))的對應(yīng)的8位bit
function base64ToArrayBuffer(base64) {
? let str = atob(base64); // 將base64解碼成源二進(jìn)制數(shù)據(jù),可以被base64編碼的字符都是latin-1字符,1個字節(jié),所以可以使用charCodeAt()返回來的utf-16b編碼設(shè)置,低字節(jié)就是0x00-0x7F,設(shè)置給Uint8Array時,保存低位,舍棄高位
? let buffer = new ArrayBuffer(str.length); //以str的長度new 一個緩沖區(qū)
? let ui8Arr = new Uint8Array(buffer);
? for (let i = 0; i < ui8Arr.length; i++) {
? ? //循環(huán)賦值每個字符對應(yīng)的unicode值,存8位
? ? ui8Arr[i] = str.charCodeAt(i);
? }
? return ui8Arr.buffer;
}Blob
Blob() 構(gòu)造函數(shù)返回一個新的 Blob 對象。 blob的內(nèi)容由參數(shù)數(shù)組中給出的值的串聯(lián)組成
var aBlob = new Blob( array, options );
var aFileParts = ['<a id="a"><b id="b">hey!</b></a>']; // 一個包含DOMString的數(shù)組
var oMyBlob = new Blob(aFileParts, {type : 'text/html'}); // 得到 blobarray 是一個由ArrayBuffer, ArrayBufferView, Blob, DOMString 等對象構(gòu)成的 Array ，或者其他類似對象的混合體，它將會被放進(jìn) Blob。DOMStrings會被編碼為UTF-8.
options ,字典,兩個屬性:
- type，默認(rèn)值為 “”，它代表了將會被放入到blob中的數(shù)組內(nèi)容的MIME類型。- endings，默認(rèn)值為"transparent"，用于指定包含行結(jié)束符\n的字符串如何被寫入。
Blob屬性
Blob.size只讀,Blob 對象中所包含數(shù)據(jù)的大?。ㄗ止?jié)）。Blob.type只讀,一個字符串，表明該 Blob 對象所包含數(shù)據(jù)的 MIME 類型。如果類型未知，則該值為空字符串。Blob.slice([start[, end[, contentType]]]),返回一個新的 Blob 對象，包含了源 Blob 對象中指定范圍內(nèi)的數(shù)據(jù)Blob.text(),返回一個promise且包含blob所有內(nèi)容的UTF-8格式的 USVString。Blob.arrayBuffer()返回一個promise且包含blob所有內(nèi)容的二進(jìn)制格式的 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 對象以表示所讀取文件的數(shù)據(jù)reader.readAsDataURL(), 讀取完成后,reader.result 屬性將包含一個data:URL格式的字符串（base64編碼）以表示所讀取文件的內(nèi)容。reader.readAsText(blob,encodeType),讀取完成后,reader.result 屬性將包含一個utf-8格式的字符串以表示所讀取文件的內(nèi)容。reader.onload事件表示讀取完成,在這里獲取數(shù)據(jù)
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.構(gòu)造函數(shù),new(fileBits: BlobPart[], fileName: string, options?: FilePropertyBag),其中BlobPart可以是String,ArrayBuffer,Blob
2.通過type=file的input選擇文件
Blob對象的來源有:
1.構(gòu)造函數(shù),new Blob(array,option),array 是一個由ArrayBuffer, ArrayBufferView, Blob, DOMString 等對象構(gòu)成的 Array ，或者其他類似對象的混合體，它將會被放進(jìn) Blob。DOMStrings會被編碼為UTF-8。
2.http返回的數(shù)據(jù)
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標(biāo)簽的href屬性的值,a.click()則可以實(shí)現(xiàn)下載,也可以作為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可選,圖片格式，默認(rèn)為 image/pngencoderOptions可選,在指定圖片格式為 image/jpeg 或 image/webp的情況下，可以從 0 到 1 的區(qū)間內(nèi)選擇圖片的質(zhì)量
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轉(zhuǎn)成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的回調(diào)函數(shù)type, 默認(rèn)是image/png,指定圖片格式quality: 0-1,決定圖片質(zhì)量
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
ctx.fillStyle = "skyblue";
ctx.fillRect(50, 50, 100, 100);
// canvas畫布轉(zhuǎn)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區(qū)域隱含的像素數(shù)據(jù)，這個區(qū)域通過矩形表示，起始點(diǎn)為(sx, sy)、寬為sw、高為sh
語法:
ImageData ctx.getImageData(sx, sy, sw, sh);
context.putImageData()
是 Canvas 2D API 將數(shù)據(jù)從已有的 ImageData 對象繪制到位圖的方法。
語法:// dx:在畫布的x軸偏移量,dy同理 // dirtyX: 要繪制imageData的起點(diǎn)x偏移量, // dirtyWidth: 要繪制的imageData的寬度 void ctx.putImageData(imagedata, dx, dy); void ctx.putImageData(imagedata, dx, dy, dirtyX, dirtyY, dirtyWidth, dirtyHeight);
總結(jié)
以上為個人經(jīng)驗(yàn)，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
原型和原型鏈?zhǔn)莏s中的難點(diǎn)也是重點(diǎn),明白了原型和原型鏈會讓我們在后面不管是學(xué)習(xí)還是工作都會更加高效,這篇文章主要給大家介紹了關(guān)于JavaScript原型與原型鏈的相關(guān)資料,需要的朋友可以參考下2021-10-10
這篇文章主要介紹了JS實(shí)現(xiàn)馬賽克圖片效果,結(jié)合完整實(shí)例形式分析了JavaScript基于HTML5 canvas圖形元素繪制實(shí)現(xiàn)馬賽克效果相關(guān)操作技巧,需要的朋友可以參考下2019-04-04
這篇文章主要介紹了ES6 Object.assign()的用法及其使用，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-01-01
javascript實(shí)現(xiàn)的柱狀統(tǒng)計圖表
下面是完成后的預(yù)覽圖，可以看到，繪制一個表格，耗時0.005毫秒，也就是200分之一秒。效率我還是比較滿意的！2010-07-07
基于Taro的微信小程序模板消息-獲取formId功能模塊封裝實(shí)踐
這篇文章主要介紹了基于Taro的微信小程序模板消息-獲取formId功能模塊封裝實(shí)踐，小程序提供了一種能力-模板消息，基于微信的通知渠道，我們?yōu)殚_發(fā)者提供了可以高效觸達(dá)用戶的模板消息能力，以便實(shí)現(xiàn)服務(wù)的閉環(huán)并提供更佳的體驗(yàn),需要的朋友可以參考下2019-07-07
這篇文章主要介紹了JavaScript Date 知識，非常不錯，具有參考借鑒價值，需要的朋友參考下吧2017-01-01
DOM節(jié)點(diǎn)刪除函數(shù)removeChild()用法實(shí)例
這篇文章主要介紹了DOM節(jié)點(diǎn)刪除函數(shù)removeChild()用法,實(shí)例分析了removeChild()函數(shù)實(shí)現(xiàn)結(jié)點(diǎn)刪除的技巧,需要的朋友可以參考下2015-01-01
JavaScript操作文件_動力節(jié)點(diǎn)Java學(xué)院整理
在HTML表單中，可以上傳文件的唯一控件就是<input type="file">。下面通過本文給大家分享JavaScript操作文件的方法，感興趣的朋友一起看看吧2017-06-06
JS實(shí)現(xiàn)計算小于非負(fù)數(shù)n的素數(shù)的數(shù)量算法示例
這篇文章主要介紹了JS實(shí)現(xiàn)計算小于非負(fù)數(shù)n的素數(shù)的數(shù)量算法,可實(shí)現(xiàn)針對一定范圍內(nèi)素數(shù)個數(shù)的統(tǒng)計功能,涉及javascript數(shù)值運(yùn)算相關(guān)操作技巧,需要的朋友可以參考下2019-02-02
這篇文章主要介紹了js代碼觸發(fā)事件代碼實(shí)例,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-01-01