将图片转成base64格式

最新推荐文章于 2024-05-31 09:05:13 发布

jsjiang_

最新推荐文章于 2024-05-31 09:05:13 发布

阅读量795

点赞数

本文链接：https://blog.csdn.net/qq_40924516/article/details/86685682

版权

将图片转成base64好处是减少页面的http请求,个人建议用在那种多页面用同一张比较小的图，因为大的图转码生成的字符串编码会很长,写入页面影响页面的可读性，不怎么方面后期的调试。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>处理图片</title>
	</head>
	<body>
        <input type="file" id="img_upload" />
        <textarea id="base64_code" rows="30" cols="100"></textarea>
        <p id="img_area"></p>
		<script type="text/javascript">
			window.onload = function() {
                var img_upload = document.getElementById("img_upload");
                var base64_code = document.getElementById("base64_code");
                var img_area = document.getElementById("img_area");
                img_upload.addEventListener('change', readFile, false);
            }
			function readFile() {
                var file = this.files[0];//这里是抓取到上传的对象。
                if(!/image\/\w+/.test(file.type)) {
                    consloe.log("请选择正确格式");
                    return false;
                }
                var reader = new FileReader();
                reader.readAsDataURL(file);
                reader.onload = function() {
                    base64_code.innerHTML = this.result;
                    img_area.innerHTML = '<div>展示：</div><img src="' + this.result + '" alt=""/>';
                }
            }
		</script>
	</body>
</html>

jsjiang_

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
将图片转成base64格式

将图片转成base64好处是减少页面的http请求,个人建议用在那种多页面用同一张比较小的图，因为大的图转码生成的字符串编码会很长,写入页面影响页面的可读性，不怎么方面后期的调试。&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;title&gt;处理图片&lt;/t..
复制链接

扫一扫