脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → JavaScript涉及二进制的转换

JavaScript涉及二进制的转换方式

 更新时间：2023年06月17日 09:52:27   作者：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 world

Base64字符串 <==> 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'}); // 得到 blob

array 是一个由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的promise
  • blob.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/png
  • encoderOptions 可选,在指定图片格式为 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);

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

最新评论