Html5 converts an image to a base64 instance code,
Base64 encoding
Base64 is a commonly used 8-bit code encoding method on the network. base64 can be used to transmit long identification information in the http environment and can be used in URLs because base64 is not readable, therefore, it has certain encryption functions.
Why convert an image to base64 encoding?
Converting an image to a base64 code can reduce http requests, because the image can be directly transmitted to the client in the form of character encoding, and http requests are required in the form of files. However, there will also be a small drawback, that is, the size of the image will increase when it is encoded with base64, but it is almost the same after gzip optimization. Therefore, in the application process, smaller images can be directly encoded as base64, while larger images are not recommended for this purpose.
How does html5 convert an image to base64?
Html5 to convert an image to base64, you need to use an html5 interface FileReader. readAsDataURL () Interface Description: This interface can convert a file to a base64 encoding format and then display it in the form of data: URL.
Sample program
The following code is a sample program. Create a new html file, copy and paste the code, and open it in a browser that supports html5.
The Code is as follows:
<! Doctype html>
<Html>
<Head>
<Meta charset = "UTF-8"/>
<Title> html5 image to base64 </title>
</Head>
<Body>
<Script type = "text/javascript">
Window. onload = function (){
// Capture and upload images, convert code results, and display the image dom
Var img_upload = document. getElementById ("img_upload ");
Var base64_code = document. getElementById ("base64_code ");
Var img_area = document. getElementById ("img_area ");
// Add a function to start listening for events
Img_upload.addEventListener ('change', readFile, false );}
Function readFile (){
Var file = this. files [0];
If (! /Image \/\ w +/. test (file. type )){
Alert ("Please make sure the file is of the image type ");
Return false;
}
Var reader = new FileReader ();
Reader. readAsDataURL (file );
Reader. onload = function (){
Base64_code.innerHTML = this. result;
Img_area.innerHTML = '<div> image img Tag display: </div> ';
}
}
</Script>
<Input type = "file" id = "img_upload"/>
<Textarea id = "base64_code" rows = "30" cols = "360"> </textarea>
<P id = "img_area"> </p>
</Body>
</Html>
Base64 code for html5 image Conversion
Program Design Ideas
1. Create three html tags. input is used to upload images. textarea is used to display base64 code. Because base64 code contains a lot of content, textarea labels and p labels are used to display images.
2. Use js to call the html5 FileReader. readAsDataURL () API and declare three variables to control Image Upload, base64 code display, and image display.
3. img_upload.addEventListener ('change', readFile, false); add a listener event. If the uploaded file changes, run the readFile function.
4. The content of the readFile function is to call the interface to convert the image to base64 and then output it.
5. Determine whether the uploaded file is an image before performing conversion and output.
Code parsing and attention
1. var file = this. files [0]; here is the object to be uploaded.
2. The result of this. result is the base64 result of the converted image output in the FileReader. readAsDataURL () interface and stored in the result. Add console. log (reader) to the code. You can view the FileReader object. (Reader is the name of my own object)
I use html5 to convert an image to base64 code. I want to write the image to the local data of the browser. When uploading the image, I try to restore it and upload the image. The purpose is to reduce data communication between local browser applications and servers.
Summary
The above is all about this article. I hope it will help you in your study or work. If you have any questions, please leave a message.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
