欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JavaScript涉及二進(jìn)制的轉(zhuǎn)換方式

 更新時(shí)間：2023年06月17日 09:52:27   作者：qq_42372534  
這篇文章主要介紹了JavaScript涉及二進(jìn)制的轉(zhuǎn)換方式，具有很好的 參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

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 world

Base64字符串 <==> Base64源數(shù)據(jù)的ArrayBuffer

通過atob()解碼,以及charCodeAt來獲取每一個(gè)能被編碼成base64的字符(都是1個(gè)字節(jié))的對(duì)應(yīng)的8位bit

function base64ToArrayBuffer(base64) {
? let str = atob(base64); // 將base64解碼成源二進(jìn)制數(shù)據(jù),可以被base64編碼的字符都是latin-1字符,1個(gè)字節(jié),所以可以使用charCodeAt()返回來的utf-16b編碼設(shè)置,低字節(jié)就是0x00-0x7F,設(shè)置給Uint8Array時(shí),保存低位,舍棄高位
? let buffer = new ArrayBuffer(str.length); //以str的長(zhǎng)度new 一個(gè)緩沖區(qū)
? let ui8Arr = new Uint8Array(buffer);
? for (let i = 0; i < ui8Arr.length; i++) {
? ? //循環(huán)賦值每個(gè)字符對(duì)應(yīng)的unicode值,存8位
? ? ui8Arr[i] = str.charCodeAt(i);
? }
? return ui8Arr.buffer;
}

Blob

Blob() 構(gòu)造函數(shù)返回一個(gè)新的 Blob 對(duì)象。 blob的內(nèi)容由參數(shù)數(shù)組中給出的值的串聯(lián)組成

var aBlob = new Blob( array, options );
var aFileParts = ['<a id="a"><b id="b">hey!</b></a>']; // 一個(gè)包含DOMString的數(shù)組
var oMyBlob = new Blob(aFileParts, {type : 'text/html'}); // 得到 blob

array 是一個(gè)由ArrayBuffer, ArrayBufferView, Blob, DOMString 等對(duì)象構(gòu)成的 Array ，或者其他類似對(duì)象的混合體，它將會(huì)被放進(jìn) Blob。DOMStrings會(huì)被編碼為UTF-8.

options ,字典,兩個(gè)屬性:

  • - type，默認(rèn)值為 “”，它代表了將會(huì)被放入到blob中的數(shù)組內(nèi)容的MIME類型。
  • - endings，默認(rèn)值為"transparent"，用于指定包含行結(jié)束符\n的字符串如何被寫入。

Blob屬性

  • Blob.size只讀,Blob 對(duì)象中所包含數(shù)據(jù)的大?。ㄗ止?jié)）。
  • Blob.type 只讀,一個(gè)字符串，表明該 Blob 對(duì)象所包含數(shù)據(jù)的 MIME 類型。如果類型未知，則該值為空字符串。
  • Blob.slice([start[, end[, contentType]]]),返回一個(gè)新的 Blob 對(duì)象，包含了源 Blob 對(duì)象中指定范圍內(nèi)的數(shù)據(jù)
  • Blob.text(),返回一個(gè)promise且包含blob所有內(nèi)容的UTF-8格式的 USVString。
  • Blob.arrayBuffer() 返回一個(gè)promise且包含blob所有內(nèi)容的二進(jìn)制格式的 ArrayBuffer

Blob,File<==> ArrayBuffer,data:格式的base64字符串,String

Blob

  • blob.arrayBuffer(),返回resolve arrayBuffer的promise
  • blob.text(),返回resolve string 的promise

FileReader

  • FileReader, 讀取Blob或者File,可以生成ArrayBuffer,base64字符串,文本
  • reader.readAsArrayBuffer(blob),讀取完成后,reader.result 屬性中將包含一個(gè) ArrayBuffer 對(duì)象以表示所讀取文件的數(shù)據(jù)
  • reader.readAsDataURL(), 讀取完成后,reader.result 屬性將包含一個(gè)data:URL格式的字符串（base64編碼）以表示所讀取文件的內(nèi)容。
  • reader.readAsText(blob,encodeType),讀取完成后,reader.result 屬性將包含一個(gè)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對(duì)象的來源有

1.構(gòu)造函數(shù),new(fileBits: BlobPart[], fileName: string, options?: FilePropertyBag),其中BlobPart可以是String,ArrayBuffer,Blob

2.通過type=file的input選擇文件

Blob對(duì)象的來源有:

1.構(gòu)造函數(shù),new Blob(array,option),array 是一個(gè)由ArrayBuffer, ArrayBufferView, Blob, DOMString 等對(duì)象構(gòu)成的 Array ，或者其他類似對(duì)象的混合體，它將會(huì)被放進(jìn) Blob。DOMStrings會(huì)被編碼為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)

返回一個(gè)包含圖片展示的 data URI

  • type 可選,圖片格式，默認(rèn)為 image/png
  • encoderOptions 可選,在指定圖片格式為 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()

返回一個(gè)ImageData對(duì)象，用來描述canvas區(qū)域隱含的像素?cái)?shù)據(jù)，這個(gè)區(qū)域通過矩形表示，起始點(diǎn)為(sx, sy)、寬為sw、高為sh

語法:

ImageData ctx.getImageData(sx, sy, sw, sh);

context.putImageData()

是 Canvas 2D API 將數(shù)據(jù)從已有的 ImageData 對(duì)象繪制到位圖的方法。

語法:// 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é)

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

相關(guān)文章

最新評(píng)論