Picture src is binary processing

Introduction

Request a picture, the returned data type is binary, and the picture should be displayed.

Picture src is binary processing

In this scenario, I first think of the situation where the src of the picture is base64. After understanding Base64 , I think it is theoretically feasible. for information and found similar 160f53f21949fe doubts and problems . The solutions provided in the reply are:

Use the URL.createObjectURL() method.
Use the window.btoa() method.
Use the readAsDataURL() method of the FileReader

The verification is performed separately below.

method

URL.createObjectURL()

URL object is used to parse, construct, standardize and encode URLs (Uniform Resource Locator). It has two static methods:

URL.createObjectURL() : Create a DOMString , which contains a URL , this URL represents the parameter object passed to this method. The URL is bound to document in the window that created it. This new URL object represents the specified File object or Blob object.
URL.revokeObjectURL() : Release an existing URL object URL.createObjectURL() The browser will automatically release them when the document exits, but in order to get the best performance and memory usage, when you finish using a URL object, you should call this method to let the browser know that you no longer need to keep the file. quoted.

This is the test example , scan the QR code to access as follows.

31-qrcode-createobjectURL

Results: method is feasible . For compatibility, see Can I use createObjectURL? .

window.btoa()

window.btoa() method creates a base-64 encoded ASCII string from the String object, where each character in the string is treated as a binary data byte.

The corresponding method is window.atob() , which decodes the character string encoded base-64

This is the test example , scan the QR code to access as follows.

31-qrcode-btoa

Result: has an InvalidCharacterError , the method is not feasible . Even if the document says that encoding is performed once, it will not work. Think about it carefully. The effect of this method is to create a new string, not to restore all types of original data.

One of the usage scenarios of this method: Use this method to encode and transmit data that may cause communication problems, and then use the atob() method to decode the data again.

For compatibility, see Can I use btoa? .

readAsDataURL()

FileReader object allows a Web application to asynchronously read the contents of a file (or raw data buffer) stored on the user's computer, using a File or Blob object to specify the file or data to be read. It owns the method readAsDataURL() , which starts to read the contents of the specified Blob. Once completed, the result attribute will contain a data: URL format string to represent the content of the read file.

This is the test example , scan the QR code to access as follows.

31-qrcode-filereader

Results: method is feasible . For compatibility, see Can I use FileReader? .

Picture src is binary processing

Introduction