Home > Article > Web Front-end > HTML5 implements converting uploaded images into base64 encoding for display (code example)

HTML5 implements converting uploaded images into base64 encoding for display (code example)

青灯夜游Original: 2018-10-08 09:25:378835browse

This chapter will introduce you to the HTML5 implementation of converting uploaded images into base64 encoding for display (code example). It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

First let’s take a closer lookbase64 encoding：

What is base64 encoding?

Base64 is the most common encoding method used to transmit 8Bit byte codes on the Internet. Base64 encoding can be used to transmit longer files in an HTTP environment. Identification information can also be used in URLs (using an improved Base64 encoding for URLs). Because base64 is not afraid of readability, that is, the encoded data will not be directly visible to the naked eye, it has a certain encryption function.

Why should we convert images to base64 encoding?

Convert the image to base64 encoding Mainly to reduce the number of requests on the web page, our website uses the http protocol, and the http protocol is a A stateless connection means that the connection will be disconnected after connection and transmission to save resources. The solution at this time is to reduce http requests as much as possible. At this time, base64 encoding can add the image to the css, so that the image can be downloaded by requesting the css, which reduces the request for the image again.

html5 How to convert uploaded images into base64 encoding for display?

Converting images to base64 requires using an html5 interface: FileReader.readAsDataURL() interface, this interface can convert files into base64 encoding format, and Then display it in the form of data: URL
Ideas:

1. Create three html tags, input is used to upload images, and textarea is used to display base64 code. Because there is a lot of base64 code content, the textarea tag is used, and the p tag is used to display images.
2. Use js to call the API of FileReader.readAsDataURL() of html5, and declare three variables to control image upload, base64 code display and image display.
3.img_upload.addEventListener('change',readFile,false); Add a listening event, and execute the readFile function if the uploaded file changes.
4. The content of the readFile function is to call the interface, convert the image into base64 and then output it.
5. Before performing conversion and output, first determine whether the uploaded file is an image.

The code is as follows:

<!Doctype html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>html5 图片转base64编码</title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}
			.demo{
				width: 100%;
				margin: 50px;
			}
		</style>
		<script type="text/javascript">
			window.onload = function() {
				// 抓取上传图片，转换代码结果，显示图片的dom
				var img_upload = document.getElementById("img_upload");
				var base64_code = document.getElementById("base64_code");
				var img_area = document.getElementById("img_area");
				// 添加功能出发监听事件
				img_upload.addEventListener(&#39;change&#39;, readFile, false);
			}

			function readFile() {
				var file = this.files[0];//这里是抓取到上传的对象。
				if(!/image\/\w+/.test(file.type)) {
					alert("请确保文件为图像类型");
					return false;
				}
				var reader = new FileReader();
				reader.readAsDataURL(file);
				reader.onload = function() {
					base64_code.innerHTML = this.result;
					//this.result里的这个result是FileReader.readAsDataURL()接口当中转换完图片输出的base64结果存放在result当中
					img_area.innerHTML = &#39;<div>图片img标签展示：</div><img src="&#39; + this.result + &#39;" alt=""/>&#39;;
				}
			}
		</script>
	</head>

	<body>
		<div class="demo">
			<input type="file" id="img_upload" />
			<textarea id="base64_code" rows="30" cols="100"></textarea>
			<p id="img_area"></p>
		</div>
	</body>
</html>

Look at the rendering:

HTML5 implements converting uploaded images into base64 encoding for display (code example)

Summary: The above is how to convert images to base64 in HTML5 You can try to compile all the codes yourself.

The above is the detailed content of HTML5 implements converting uploaded images into base64 encoding for display (code example). For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Mobile HTML5 simulates long press delete event (with code)Next article：Mobile HTML5 simulates long press delete event (with code)

See more

HTML5 implements converting uploaded images into base64 encoding for display (code example)

Related articles