图片的 base64 编码就是可以将一副图片数据编码成一串字符串,使用该字符串代替图像地址,使用 base64 传输图片文件可以节省一个 http 请求,图片的 base64 编码可以算是前端优化的一环
VUE Base64编码图片展示
<img :src="icon">
export default {
data() {
icon: 'data:image/png;base64,,XXXXX...',
}
}
图片在线转换Base64:http://imgbase64.duoshitong.com/
Base64编码图片转换图片
base64ImgtoFile(dataurl, filename = 'file') {
let arr = dataurl.split(',')
let mime = arr[0].match(/:(.*?);/)[1]
let suffix = mime.split('/')[1]
let bstr = atob(arr[1])
let n = bstr.length
let u8arr = new Uint8Array(n)
while (n--) {
u8arr[n] = bstr.charCodeAt(n)
}
return new File([u8arr], `${filename}.${suffix}`, {
type: mime
})
},
// base64编码的图片
var base64Img = 'data:image/png;base64,XXXXX...';
//转换图片文件
var imgFile = this.base64ImgtoFile(base64Img);
更便捷的图片转化Base64编码方式
利用 Chrome 浏览器,在 chrome 下新建一个窗口,然后把要转化的图片直接拖入浏览器,打开控制台,点 Source,如下图所示,点击图片,右侧就会显示该图片的 base64 编码
原文地址:https://www.cnblogs.com/maggieq8324/p/11577697.html
时间: 2024-10-16 21:32:21