fromDo you know how the front end handles images?

preface

As front end engineers, we work with images on a daily basis. Front-end engineers working on major e-commerce platforms may feel this more clearly.

Here are some of the pitfalls I’ve encountered in dealing with pictures, and I’d like to share my experience with you.

1. Scene representation

When you request an interface with Postman, you get this image (binary)

I went to look at the Axios documentation, and here’s what it says

// `responseType` indicates the type of data that the server will respond with// options are 'arraybuffer', 'blob', 'document', 'json', 'text', 'stream' responseType: 'json', // default copy codeCopy the code

Therefore, the reason for the garble is that ** AXIos returns JSON text by default, and binary image data is coerced into JSON text. **

Once the cause is found, the solution is easy. So in AXIos, the responseType returns data type json by default, so let’s change that to return data type blob.

exportfunctionminiprogramQrcode (params) { return axios.post( env.MI_URL + '/XXXX/XXX/XXXX', params, // set responseType to blob {responseType: 'blob', emulateJSON: true }).then(res => { if (res.data) { returnPromise.resolve(res.data) } else { throw res } }).catch(err => { Returnpromise.reject (err)})} Copies the codeCopy the code

The next question is, what do you do with the BLOB object and display it on the front page?

The code is as follows:

CreateMiniQrcode (blob) {let img = document.createElement('img') img.onload = function (e) {// The onload of the element The event will destroy the URL object, freeing memory. Window. URL. RevokeObjectURL (img. SRC)} / / browser allows you to use the URL createObjectURL () method, for Blob object to generate a temporary URL. // This URL begins with blob://, indicating a blob object. Img. SRC = window. URL. CreateObjectURL (blob) document. QuerySelector (' imgQrCode '). The appendChild (img)} copy codeCopy the code

Did you think it was over? No, No, No. It’s not enough to know how to solve a problem, but to think beyond the surface.

Two, divergent thinking

Generally, images can be stored in two ways at the back end:

First: pictures can be stored in the form of independent files in the server's designated folder, and then the path into the database field; The second is to convert the Image into a binary stream and store it directly in the Image type field of the database. Copy the codeCopy the code

For the first storage method, our front end assigns the storage path directly to the SRC property, which can be easily displayed.

For the second storage, our front-end needs to hand over its binary stream to a BLOB object and then use the BLOB API to generate a temporary URL assignment to the SRC attribute for display.

Both storage methods have corresponding solutions, which seem to have solved the problem of picture display perfectly. However, our business scenarios are diverse and fluid. There are times when a drag-and-drop plugin automatically returns a Blob object to you, but unfortunately you find yourself using a third-party service interface that only receives Base64 data.

So, the image of the three forms of URL, base64, blob, three can be transformed to meet the needs?

First post url to base64, base64 and blob conversion demo, the other will be updated here, you can click here

1. Turn base64 url

Url to base64 method encapsulation

/ / principle: ReturnnewPromise ((resolve,reject) => {let image = new image (); let image = new image (); image.onload = function() { let canvas = document.createElement('canvas'); canvas.width = this.naturalWidth; canvas.height = this.naturalHeight; GetContext ('2d'). DrawImage (image, 0, 0); drawImage(image, 0, 0); // resultlet result = canvas.toDataURL('image/png') resolve(result); }; // CORS policy, Problems will cross domain https://stackoverflow.com/questions/20424279/canvas-todataurl-securityerror image.setAttribute("crossOrigin",'Anonymous'); image.src = url; Image.onerror = () => {reject(newError(' image stream error ')); }; } Duplicate codeCopy the code

You can call it like this:

Let imgUrL = 'http://XXX.jpg' this.getdatauri (imgUrL).then(res => {// Transform base64 image address console.log('base64', res)}) copy the codeCopy the code

2. Turn base64 blob

Base64 to BLOb method encapsulation

/ / principle: Create a temporary URL base64ToBlob ({b64Data = ", contentType = ", SliceSize = 512} = {}) {returnnewPromise((resolve, reject) => {// Let byteCharacters = atOB (b64data);  let byteArrays = []; for (let offset = 0; offset < byteCharacters.length; offset += sliceSize) { let slice = byteCharacters.slice(offset, offset + sliceSize); let byteNumbers = []; for (let i = 0; i < slice.length; i++) { byteNumbers.push(slice.charCodeAt(i)); } // A typed array of 8-bit unsigned integer values. The content will be initialized to 0. // If the requested number of bytes cannot be allocated, an exception is thrown. byteArrays.push(newUint8Array(byteNumbers)); } let result = new Blob(byteArrays, { type: contentType }) result = Object.assign(result,{ // jartto: CreateObjectURL preview: url.createObjecturl (result), name: 'image.png'}); Resolve (result)})} copy the codeCopy the code

You can call it like this:

let base64 = base64.split(',')[1] this.base64ToBlob({b64data: base64, contentType: 'image/ PNG '}).then(res => {// after the blob object console.log('blob', res)}) copies the codeCopy the code

3. Turn base64 blob

Blob to Base64 method encapsulation

/ / principle: With fileReader's readAsDataURL, Change blob to base64 blobToBase64(blob) {returnnewPromise((resolve, reject) => {const fileReader = new fileReader (); fileReader.onload = (e) => { resolve(e.target.result); }; // readAsDataURL fileReader.readAsDataURL(blob); Filereader. onerror = () => {reject(newError(' file stream exception ')); }; }); } Duplicate codeCopy the code

You can call it like this:

This.blobtobase64 (blob).then(res => {// converted base64console.log('base64', res)}) copies the codeCopy the code

Ps: The above method is for playing picture stream optimization, thanks to the original author.

Three, the induction of picture processing methods

1. How to store images on the backend

As mentioned earlier, images can be stored in two ways at the back end. Let’s review: First, images can be stored as a separate file in a specified folder on the server, and the path to the database field. Second, the Image is converted into binary stream and stored directly in the Image type field of the database.

So which of these two storage methods is better?

As I understand it, in an Internet environment, high traffic, database speed and performance aspects are important. Generally, the way to store pictures in the database is less, and more is to store the picture path in the database. When showing pictures, you only need to connect the disk path to load the picture in. Because the image belongs to the large field. A picture can range from 1m to several meters. Such large field data will increase the burden of the database, slow down the database. This is important in the case of large concurrent access. This is an experience. Any DBA analysis of database performance tuning will tell you the same thing: don’t store images in the database.

Therefore, if your company’s backend brother often stores images in binary form to the database and then returns them to you for docking, you should know how to dui him (funny face).

For more information on how images or files are stored in the database, please click here

2. Display mode of front end pictures

For the front end: there are three ways to display images in the front end: URL, Base64, and BLOb

Which one is more elegant?

Url: Generally speaking, it is better to use URL for the display of pictures. If the field passed from the back end is the image path.

Base64: If the image is large and the color level of the image is rich, it is not suitable to use this method, because the string encoded in base64 is very large, which will significantly increase the HTML page and affect the loading speed. If images such as loading or table lines are very small and occupy an HTTP request, they will be used in many places. Is very suitable for “Base64 :URL image” technology optimization! Detailed zhang Xinxu’s Demo, please poke here.

Blob: When the back end returns a particular binary stream of images, as described in my scene representation in Part 1, the front end receives it using the BLOB container. It is better to display pictures in blob.

Four, feeling

Give, record, summarize. I will record and sort out the problems encountered in the project bit by bit. I believe that these are scattered branches and leaves. With the increase of project experience, these branches and leaves will eventually grow into a towering tree.