Shulou(Shulou.com)05/31 Report--

This article mainly introduces the relevant knowledge of "how to achieve the conversion between file, bolb and base64 pictures in js". The editor shows you the process of operation through an actual case. The method of operation is simple and fast, and it is practical. I hope that this article "how to achieve the mutual transformation between file, bolb and base64 pictures in js" can help you solve the problem.

Upload pictures on JS

We should be clear that there are three ways to display pictures: file (file stream), bolb (local stream), and base64 (binary stream).

File

The File interface provides information about the file and allows JavaScript in a web page to access its contents.

Typically, the File object comes from the FileList object returned by the user after selecting a file on an element, from the DataTransfer object generated by the drag-and-drop operation, or from the mozGetAsFile () API on the HTMLCanvasElement. In Gecko, privileged code can create File objects that represent any local file without user interaction

The File object is a special type of Blob and can be used in context of any Blob type. For example, FileReader, URL.createObjectURL (), createImageBitmap (), and XMLHttpRequest.send () can all handle Blob and File.

Blob

The Blob object represents an immutable class file object with raw data. It points to a local temporary address, and Blob does not necessarily represent data in the native format of JavaScript. The File interface is based on Blob and inherits the function of blob and extends it to support files on the user's system.

Base64

Base64 is a similar set of binary-to-text (binary-to-text) coding rules that allow binary data to be represented in the format of ASCII strings after being interpreted as radix-64. The word Base64 comes from a MIME data transfer code. If it is the base64 of the picture, it can be used to compress.

They can be transformed into each other. When uploading pictures, you usually get blob and file.

Picture compression

Compression We choose canvas to compress, and toDataURL will automatically convert the picture to base64.

Use canvas to compress the image * code export function translate (imgData, callback) {var img = new Image (); img.src = imgData.tempFilePaths [0]; img.onload = function () {var that = this; var h = that.height; / / to ensure the same height after compression var w = that.width / / make sure the compressed width is the same as var canvas = document.createElement ('canvas'); / / create canvas var ctx = canvas.getContext (' 2d'); / / 2d format / / create width and height attributes, and give canvas a new attribute node var anw = document.createAttribute ("width"); anw.nodeValue = w Var anh = document.createAttribute ("height"); anh.nodeValue = h; canvas.setAttributeNode (anw); canvas.setAttributeNode (anh); ctx.drawImage (that, 0,0, w, h); / / draw to canvas var quality = 0.1 / / you can select the quality of the picture from 0 to 1. If the value range is out of range, the default value of 0.92 is used. Other parameters are ignored var base64 = canvas.toDataURL ('image/jpeg', quality); / / converted to base64 canvas = null; var res = dataURLtoFile (base64,imgData.tempFiles [0] .name); callback (res) }} base64 to file* code function base64ToFile (dataurl, filename) {/ / convert base64 to file var arr = dataurl.split (','), mime = arr [0] .match (/: (. *?); /) [1], bstr = atob (arr [1]), n = bstr.length, u8arr = new Uint8Array (n) While (while) {u8arr [n] = bstr.charCodeAt (n);} return new File ([u8arr], filename, {type: mime});} base64 to blob* code function base64toBlob (dataurl) {/ / base64 to blob var arr = dataurl.split (','), mime = arr [0] .match (/: (. *?) /) [1], bstr = atob (arr [1]), n = bstr.length, u8arr = new Uint8Array (n); while (Nmura -) {u8arr [n] = bstr.charCodeAt (n);} return new Blob ([u8arr], {type: mime});} blob to base64* code function blobToBase64 (blob, callback) {/ / blob to base64 let reader = new FileReader () Reader.onload = function (e) {callback (e.target.result);} reader.readAsDataURL (blob);}

In addition to the above methods, you can also use canvas to convert to base64.

Blob to file* code

Method 1:

Function blobToFile (blob, fileName, type) {/ / blob to file let files = new window.File ([blob], fileName, {type: type}) return files}

Method 2:

Function blobToFile (blob, fileName) {/ / blob to file blob.lastModifiedDate = new Date (); blob.name = fileName; return blob;}; file to bse64* code function fileToBase64 (file) {/ / file to bse64 let reader = new FileReader (); reader.readAsDataURL (file) Reader.onload = function (e) {return e.target.result}} about "how to transform file, bolb and base64 images in js", thank you for your reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.