将图片转成base64格式

偏执的太偏执、 2022-03-22 15:47 462阅读 0赞

将图片转成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>

发表评论取消回复

表情：

评论列表（有 0 条评论，462人围观）

还没有评论，来说两句吧...

相关阅读

相关 python将图片转成base64

import base64 def image_to_base64(image_path): with open(image_path

港控/mmm°/ 2024年03月22日 17:02/ 0 赞/ 121 阅读

相关 java将图片转成base64编码

InputStream in = null; byte[] data = null; //读取图片字节数组 try

缺乏、安全感/ 2023年06月19日 02:28/ 0 赞/ 27 阅读

相关 vue将图片网络地址转base64格式

vue中将图片网络地址转base64格式 toBase64(imgUrl) { // 一定要设置为let，不然图片不显示 con

ゝ一世哀愁。/ 2023年02月28日 05:48/ 0 赞/ 11 阅读

相关 base64编码转图片格式

base64编码转图片格式 <!DOCTYPE html> <html lang="en"> <head> <meta chars

╰半夏微凉°/ 2023年01月01日 04:58/ 0 赞/ 344 阅读

相关将图片转换成Base64

<!DOCTYPE html> <html> <head> <meta charset="UTF-8">

一时失言乱红尘/ 2022年07月13日 11:09/ 0 赞/ 299 阅读

相关 base64转图片图片转base64

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR

本是古典何须时尚/ 2022年06月17日 05:09/ 0 赞/ 545 阅读

相关将图片转成base64格式

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

偏执的太偏执、/ 2022年03月22日 15:47/ 0 赞/ 463 阅读

相关 Java 把图片转成base64 / 把base64 转成二进制

1. Java 把图片转成base64 @Test public void method01(){ InputStream in = nu

た入场券/ 2022年02月28日 13:16/ 0 赞/ 1138 阅读

相关图片转成base64格式上传至数据库

<!DOCTYPE html> <html> <head> <meta charset="\{CHARSET\}"> <title>图片上传</title>

- 日理万妓/ 2021年12月17日 04:49/ 0 赞/ 503 阅读

相关将图片转换成base64

data:图片类型;base64,图片二进制Buffer.toString('base64') 图片类型可以使用mime库根据图片后缀进行转换 ba

r囧r小猫/ 2021年07月24日 20:43/ 0 赞/ 827 阅读