In the pages of some websites, when we checked the code, we found that the image reference address of some pages was not the url address of the image, but the encoding starting with data:image/png;base64, followed by a large string of super-long disordered garbled codes. String. So what is this?
It is a Data URI scheme defined in RFC2397. The supported types are text/plain text and HTML code text/html, text/css, text/javascript, image/gif, image/png, image/jpeg, image/x- Icon and other types of base64 encoded data.
It can load some smaller data without the reference of external files, and directly embed the data into the web page, so that it can reduce the request of the page.
Why do you say that? For example, when we open a web page, every picture loaded will send a sequential http request to download to the browser cache, and the picture will be directly converted to base64-encoded data and downloaded directly to the browser along with the html. Send extra requests, but the browser will not cache the image.
Although base64 encoding can reduce the image request, it will increase the size of the css file and increase the css parsing time. Therefore, larger pictures generally use CssSprites technology, and the pictures converted to base64 encoding cannot be used for smaller ones or special applications. For the picture of CssSprites, it is still a better choice.
Base64 is one of the most common binary encoding methods
So entering the topic, how to convert base64-encoded pictures into normal pictures?
Example:
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACYAAAAjCAYAAAD48HgiJI=
For example, the string of characters above is actually a small picture, data represents the name of the data agreement, the name of the data type is image/png, and the encoding method of the data is base64. After the comma of base64 is the complete base64 encoding of the image/png file. String data.
1. We can copy it directly to the address bar above common browsers such as Firefox, Google, etc., and then press enter to open the picture, right-click on the opened picture and select Save Picture As, and reload the picture. Under the name, you can convert the base64 encoding to a picture.
2. Create a new blank document, and then save it as an html file, right-click to select the open method-Notepad, and modify the code
<img src="Need to decode base64 string encoding" />
At the src address of the code, the base64 code that needs to be decoded is directly copied and replaced to this place, and then saved. Double-click to open the html page with a browser, and then you will see the displayed picture, and in the same way, move the mouse pointer to the picture, right-click and save as picture, modify the name to save the picture.
3. Similar to the second saving method, since the image can be loaded by directly assigning the value to the img tag in html, then we can directly use the html5 feature to assign a value to the a tag, and give it a download attribute to download the image directly. No extra operations are required.
<a href="base64 picture encoding" target="_blank" download="download picture">download picture</a>
Modify the href address of the code to base64 encoding, and write the code into the newly created html file.
This method is also used in the image base64 encoding and conversion tools in many websites.
Code example:
<input type="file" name="select picture" id="basefile" />
<textarea id="wqtool-aaa"></textarea>
<button id="wqtool-ccc" onClick=" huanyuan();">base64 to image</button>
<div id="xzpic"></div>
<script type="text/javascript">
var tupiandizhi = document.getElementById("basefile");
var wqtoolbase = document.getElementById("wqtool-aaa");
var xzpic = document.getElementById("xzpic");
tupiandizhi.addEventListener('change',dqbase,false);
function dqbase(){
var file = this.files[0];
var wqtoolbase = document.getElementById("wqtool-aaa");
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function(e){
wqtoolbase.innerHTML = this.result;
}
};
function huanyuan(){
var wqtoolbase= document.getElementById("wqtool-aaa").value;
xzpic.innerHTML ='<img src="'+wqtoolbase+'" /> <a href="'+wqtoolbase+'" target="_blank" download="1.png">Click to download</a>';
}
</script>
In order to easily realize the function of converting between base64 and image files on the front-end html page, the above code mainly relies on the readAsDataURL method to read the base64 encoding in the specified flie object and the download attribute in a
We only need to upload the component in flie and select the picture that needs to be converted to base64 encoding, and then the base64 characters read by the readAsDataURL method can be displayed in the text box with id wqtool-aaa through document.getElementById("wqtool-aaa").value middle.
Or read the string in the text box as a variable wqtoolbase through the document.getElementById of js, assign it to the src attribute of the img tag and the href attribute of the a tag, and then use the new download in html5 to directly perform the referenced data Download it to get the file converted from base64 encoding to image.
Copy the above code to the previous method of saving the new text as an html file, and then drag it into the browser to run the html file, so that we have made a simple function and practical pure front-end implementation of base64 and image conversion online tool .
In addition to the front-end implementation method, in the back-end code, there are many built-in base64 functions or encoding libraries that can directly and conveniently achieve such base64 image encoding mutual conversion effects.