html中的img的src可以写二进制流

33 篇文章 5 订阅

网页渲染图片的常用做法是在img标签中src属性为一个图片的url地址,由浏览器去下载、缓存、渲染。但这样的话就需要事先将图片进行保存起来,而有些临时性的图片是不需要保存的,就可以在前端中以二进制的方式去渲染该图片即可。

<el-input v-model="loginForm.code"  style="width: 172px; float: left" maxlength="5">
</el-input>
<el-image :src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAgAAAQABAAD/2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8UHRofHh0a\r\nHBwgJC4nICIsIxwcKDcpLDAxNDQ0Hyc5PTgyPC4zNDL/2wBDAQkJCQwLDBgNDRgyIRwhMjIyMjIy\r\nMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjL/wAARCAAoAHgDASIA\r\nAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQA\r\nAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3\r\nODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWm\r\np6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEA\r\nAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSEx\r\nBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElK\r\nU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3\r\nuLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwD0IUGW\r\nJJEjaRFkfOxSwy2OeB3pQK8V+K0OoaF450zX9PuDHNOm2FgANjJwQc8EEMOvqaAPcBUgFePWfxmu\r\nNNWSy8R6JNFqMJ2t5XyAn3VuR+ua39J+L+h6jdJBLBc2u4Eh5ANuByTn0xzQB6MKetc74s1w6JoU\r\nt1C0ZmGAqMfvZYIOegwzrnPbNcd8P7/XtUkN6mqpcRLJtntRtYrliOpxgE+Y3c4UeoFAHq4FSCmL\r\n+GaeWVELuwVVGSScACgCQVItR5C9SB9aZZ3trfxGS1nSVBjLKcjlQw/8dYH8aALS1IBTVqQUAOFS\r\nCvG/GfjXxFrvif8A4RLwSwS4jDfabgHDIVcqRnsBjr70z4a+MPEll47ufBPimc3VyFYxys25gyru\r\nxnuCuTQB7UKKcBRQBxYFc74z8GW3jPTYLWa5e2eCQyJKihuoIwR6dD+FdGKkFAHzZqdl/YXjoxeM\r\n1/tGFlCSzQyHcy7cK/HO4ADg+nfvHY+Fotf8TGz8Kagz2i4ZZL0eXsJ7EfxdOw/Cuq1bSLG1+LV2\r\nfE6A6ZfpIYWkOByABg9iOawprC50v4i2GmadNHPLbzII7iAjM8eRjcBxuAyCe/X3IBofEey8ZfZL\r\ne48UW1rPb24aOK5s5Nq7m/vDvyB2HSrnw+8VeEvCx82/s9TsZ5iGWR1Z4Su3G4Y5J5bnHRq774nR\r\nXcvhyJLaOSWbzVaNUj3r5gztBHvnr2xWt4M0tF8KQW17Z5DoMpcQjJXHAYdyORQByGs/Ea007VLX\r\nUtE1iK/sLgsZ7dpQHXGMfKw3Ko+bjjk1IPF954y8UQ6VpjsNPZWMskbq3ycDBXDA8+uD6Y61R+KF\r\n14e06ODSNN0XTmvn4UR26jYeg4H1PGPyIrkfB+meH9O10ab4tsEmW6C+TKZdqofqpB68f/XoA9h+\r\nIOmTJ4QcWdzPD5QRSIZSuEwVIVe+d2PxHpXn8fjJtP8AhMbWOUR3pKW7EkeaTyjn1GAFUH0Fegzf\r\nCzw+9qy2M2qWWRlfIv5cDuOGJrxe68C6zpPi42Ev2mKO5fyopmCv5u88gE9eMknr7UAeifB3xdf3\r\nGnajHrd7PPJbF2QStlgqqGbOeeMcfjWz4A8Y6/4v8Uag8ksS6NbOyIkUYyxxkZY8/lXk3i6y1n4f\r\n65KLfUpJ/ttuYfPe2VDIuArcAnnpz1Oetd/8MtE8baL4bd9E/wCEfkt55i5+2CZXfgYIZeMY9qAP\r\nRNc0S70/S7qfwhYWMGtXD4M7oAcE5Yljz+HrXmnwxtY9P+KWoQ+KjKfFZUtFIzAxuCuCVPrt6e1U\r\nrzxV8U/C/iWa51DT5L1ZQAsMYZ4AM/w7eh/WjwTpHi3xT8WLTxTrml3FpHFlzI0exRhcBeee9AH0\r\nQBRSiigDjFp60UUAZ2ueHNL8SWX2XU7VJlGdjH7yEjGQe1cPd+DtJ8B65oGs6dG/km++y3Xmtuws\r\noIVvYK2KKKAPVAoOMgHHrUgFFFAGOfCOkN4gGtG3/wBKwM8AgkZG7pnODjrg8ZGQCJtY8KaVrtxb\r\n3F7CxmtzuikRtpVuze+O2cj2oooA2raBbeBIVZ2CjGZHLMfqTyadNaW90F8+FJNuSpZclSRjI9Di\r\niigDF8T+B9F8XQQJqMDCSBgYpojtdADyB7H/AA9K3NK06HStOisoM+XHk5Pcklj+pPFFFAF8CpFF\r\nFFAEi0UUUAf/2Q==" class="captchaImg" @click="getCaptcha">
</el-image>

如上面例子中的src属性则就是在前端对二进制进行渲染的。

data表示取得数据的协定名称,image/png 是数据类型名称,base64 是数据的编码方法,逗号后面就是这个image/png文件base64编码后的数据。

目前支持的数据类型有:

data:,文本数据
data:text/plain,文本数据
data:text/html,HTML代码
data:text/html;base64,base64编码的HTML代码
data:text/css,CSS代码
data:text/css;base64,base64编码的CSS代码
data:text/javascript,Javascript代码
data:text/javascript;base64,base64编码的Javascript代码
data:image/gif;base64,base64编码的gif图片数据
data:image/png;base64,base64编码的png图片数据
data:image/jpeg;base64,base64编码的jpeg图片数据
data:image/x-icon;base64,base64编码的icon图片数据

Base64编码是从二进制到字符的过程,可用于在HTTP环境下传递较长的标识信息。采用Base64编码具有不可读性,需要解码后才能阅读。

目前,IE8、Firfox、Chrome、Opera浏览器都支持这种小文件嵌入。

使用python将二进制数据转换为Base64编码

import base64

# img_byte为图片二进制数据

img_bs64 = base64.b64encode(img_byte).decode('utf-8')

# img_bs64为图片bs64的数据 

更多管base64编码格式的转换: 

Python如何实现图像的二进制与base64互转 - 开发技术 - 亿速云 (yisu.com)icon-default.png?t=M666https://www.yisu.com/zixun/692252.html

  • 3
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

HHYZBC

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值