Home > Developer > Web Develop
This article introduces how to use HTML5 to convert images into Base64, which is described in detail through the sample code, which can be used for reference by friends who need them.
Base64 Coding Introduction
Base64 is a commonly used on the network encoding of 8bit byte code, base64 can be used in the HTTP environment to pass longer identification information, and can be used in the URL, because Base64 is not afraid of readability, so has a certain encryption function.
Why convert a picture to a base64 code?
Converting a picture to Base64 code reduces the HTTP request because the image can be passed directly to the client as a character encoding, and the file form requires an HTTP request. But there will also be a small drawback, that is, the image encoding base64 when the size will become larger, but by the gzip optimization after almost. Therefore, in the process of the application of small images can be directly encoded into base64, larger images are not recommended for such use.
HTML5 how do I convert a picture to Base64?
HTML5 if you want to convert a picture to Base64 you need to use a HTML5 interface Filereader.readasdataurl () interface description, this interface can convert the file into a Base64 encoding format, and then show it in the form of Data:url.
Sample Program
The following code is a sample program, create a new HTML file, and then copy and paste the code using a browser that supports HTML5 to open to see the effect.
1 <!Doctype HTML>2 <HTML>3 <Head>4 <MetaCharSet= "Utf-8" />5 <title>HTML5 image to Base64</title>6 </Head>7 <Body>8 <Scripttype= "Text/javascript">9 window.onload= function(){ Ten //crawl uploaded images, convert code results, display the DOM of the picture One varImg_upload=document.getElementById ("Img_upload"); A varBase64_code=document.getElementById ("Base64_code"); - varImg_area=document.getElementById ("Img_area"); - //adding functions to listen for events the Img_upload.addeventlistener (' Change', ReadFile,false);} - functionReadFile () { - varfile= This. files[0]; - if(!/image\/\w+/. Test (File.type)) { + Alert ("Make sure the file is an image type"); - return false; + } A varReader=NewFileReader (); at reader.readasdataurl (file); - Reader.onload=function(){ - base64_code.innerhtml= This. Result; - img_area.innerhtml= '<div> image img Tag show: </div>'+ This. Result+'"/>'; - } - } in </Script> - <inputtype= "File"ID= "Img_upload"/> to <textareaID= "Base64_code"rows= "+"cols= " the"></textarea> + <PID= "Img_area"></P> - </Body> the </HTML>
HTML5 Picture Conversion Base64 Code
The design idea of the program
1. Create three HTML tags, input is used to upload images, textarea is used to display Base64 code, because Base64 code a lot of content so use textarea tags, p tags used to display pictures.
2. Use JS to call HTML5 's Filereader.readasdataurl () API, declare three variables to control the image upload, base64 code display and picture display.
3.img_upload.addeventlistener (' Change ', readfile,false); Add a listener event that executes the ReadFile function if the upload file changes.
The content of the 4.readFile function is called the interface, the picture is converted to base64 and then output.
5. Before performing the conversion and output, determine if the upload file is a picture.
Code parsing and attention
1.var File=this.files[0]; Here is the object to crawl to the upload.
2.this.result This result is the Filereader.readasdataurl () interface in which the output of the image is converted Base64 The results are stored in result. Add Console.log (reader) to your code, and look at the FileReader object. (Reader is the name of my own object)
I use HTML5 to convert the image to Base64 code is mainly to write the image to the browser local data to use, upload, and then try to restore the image upload. The purpose is to reduce the data communication between the local browser application and the server.
Summarize
The above is the entire content of this article, I hope that everyone's study or work to bring some help, if there are questions you can message exchange.
See the original: ' http://www.jb51.net/html5/495901.html ', thanks to the original author to share!
HTML5 converting a picture to a Base64 instance code
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
