Vue实现Base64转png、jpg图片格式
更新时间:2023年09月20日 10:09:34 作者:前端扎啤
这篇文章主要给大家介绍了关于Vue实现Base64转png、jpg图片格式的相关资料,前段获取生成的是base64图片,需要转化为jpg,png,需要的朋友可以参考下
method中写两个方法:
- 根据base64转图片的方法
- 根据转换出blob格式的文件导出的方法
//base64转png
base64ImgtoFile(dataurl, filename = 'file') {
const arr = dataurl.split(',')
const mime = arr[0].match(/:(.*?);/)[1]
const suffix = mime.split('/')[1]
const bstr = atob(arr[1])
let n = bstr.length
const u8arr = new Uint8Array(n)
while (n--) {
u8arr[n] = bstr.charCodeAt(n)
}
return new File([u8arr], `${filename}.${suffix}`, {
type: mime
})
},
//图片下载
downloadBlob(blob, filename) {
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = filename;
a.click();
URL.revokeObjectURL(url);
}传入base64的图片全路径,在合适的位置分别调用这两个方法,即可实现下载
var base64Img = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAABAFJREFU
..........................DlzUWu+L9NALAI4D+JOIkszc5PuWNABcBbAbwGGt9ewmAFLKJ5n5s5iXEhZCvBQEgQ3YEdd1p4UQR9PpdH11dXWRmV8motPJZPJgIpH4bWVl5dDw8PAR3/ftE2B9BuzX6Ojo/kajYZvp/i5vhAYRXbBPs3YTdcuYlPIuZj7tOM4r2+n+vx6nPdR/x1T/Aau20TA//wiSAAAAAElFTkSuQmCC';
var imgFile = this.base64ImgtoFile(base64Img);
this.downloadBlob(imgFile, 'test.png')
附:图片转base64的方法
getBase64(file) {
//把图片转成base64编码
return new Promise(function (resolve, reject) {
let reader = new FileReader();
let imgResult = "";
reader.readAsDataURL(file);
reader.onload = function () {
imgResult = reader.result;
};
reader.onerror = function (error) {
reject(error);
};
reader.onloadend = function () {
resolve(imgResult);
};
});
},总结
到此这篇关于Vue实现Base64转png、jpg图片格式的文章就介绍到这了,更多相关Vue Base64转png、jpg内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
相关文章
如何在 Vite 项目中自动为每个 Vue 文件导入 base.les
在Vite配置中通过添加css.preprocessorOptions实现自动导入base.less,简化Vue组件的样式设置,提高代码的可维护性,感兴趣的朋友跟随小编一起看看吧2024-09-09
vue拖拽组件 vuedraggable API options实现盒子之间相互拖拽排序
这篇文章主要介绍了vue拖拽组件 vuedraggable API options实现盒子之间相互拖拽排序克隆clone,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下2019-07-07


最新评论