[Front-end skills] Image format conversion (File, Blob, base64)

@Author：Outman
@Date：2022-11-17

Image format conversion (File, Blob, base64)

1. Type introduction

BLOB (binary large object): Binary large object is a container that can store binary files. In computers, BLOB is often the field type used to store binary files in databases.

attribute name	read/write	describe
size	read only	The size, in bytes, of the data contained in the Blob object.
type	read only	A string indicating the MIME type of the data contained in this Blob object. If the type is unknown, the value is the empty string. For example "image/png".

File: The File object is usually the FileList object returned by the user uploading a file in an <input> element in the webpage, or the DataTransfer object returned by the drag-and-drop operation, or it can be created by itself in the console of the browser.

attribute name	read/write	describe
name	read only	Returns the name of the file. For security reasons, the returned value does not contain the file path.
type	read only	Returns the media type (MIME) of the file represented by the File object. For example a PNG image is "image/png".
lastModified	read only	number, returns the last modification date of the referenced file, in milliseconds since 0:00, January 1, 1970.
lastModifiedDate	read only	Date, returns the last modification date of the current file. If the last modification date of the file cannot be obtained, the current date will be used instead.
size	read only	The size, in bytes, of the data contained in the File object.

base64: Base64 is one of the most common encoding methods used to transmit 8Bit bytecode on the Internet. Base64 is a method of representing binary data based on 64 printable characters. Encoding rules: change 3 bytes into 4 bytes; add a newline character every 76 characters; the final terminator should also be processed.

Two, type conversion

1. BLOB and File

• BLOB to File

const file = new File([blob], fileName, {
    
     type: fileType, lastModified: Date.now() });

• File to BLOB

const blob = URL.createObjectURL(file);

2. BLOB and base64

• BLOB(url) to base64

const image = new Image();
image.src = imgBlob;
image.onload = () => {
    
    
  // 构建canvas节点
  const canvas = document.createElement('canvas');
  canvas.width = image.width;
  canvas.height = image.height;
  const context = canvas.getContext('2d');
  context.drawImage(image, 0, 0, image.width, image.height);
  // 转换
  const imgBase64 = canvas.toDataURL();
  console.log(imgBase64);
};

• base64 to BLOB

// 分割base64
const temp = base64Data.split(','); 
// 获取类型
const mime = arr[0].match(/:(.*?);/)[1];
// 解码使用 base-64 编码的字符串
const raw = window.atob(temp[1]);
const rawLength = raw.length;
// base64文件数据读取
const uInt8Array = new Uint8Array(rawLength);
for (let i = 0; i < rawLength; i += 1) {
    
    
  uInt8Array[i] = raw.charCodeAt(i);
}
const blob = new Blob([uInt8Array], {
    
     type: mime });

3. File and base64

• File to base64

const reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function (e) {
    
    
  // e.target.result 即为base64结果
  console.log(e.target.result);
};

• base64 to File

// 分割base64
const arr = base64Data.split(','); 
// 获取类型
const mime = arr[0].match(/:(.*?);/)[1];
// 解析base字符串
const bstr = atob(arr[1]); 
const n = bstr.length; 
// base64文件数据读取
const u8arr = new Uint8Array(n);
while (n--) {
    
    
  u8arr[n] = bstr.charCodeAt(n);
}
const file =  new File([u8arr], filename, {
    
     type: mime });