vue截图转base64转文件File异步获取方式
作者：汪小敏同学
这篇文章主要介绍了vue截图转base64转文件File异步获取方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
vue截图转base64转文件File异步获取
import html2canvas from "html2canvas";
export function 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
})
}
export function toImages(imageTofile) {
return new Promise((resolve, reject) => {
html2canvas(imageTofile, {
backgroundColor: null,
useCORS: true
}).then((canvas) => {
const url = canvas.toDataURL('image/png');
resolve(base64ImgtoFile(url))
}).catch((err) => {
reject(err)
})
})
}
// 调用
toImage() {
let that=this;
toImages(this.$refs.imageTofile).then((imgFileRaw) => {
that.imgFileRaw = base64ImgtoFile(this.htmlUrl);
}).catch((error) => {
that.imgFileRaw = null;
});
},vue中base64和file文件类型互相转换
如图需求，上传文件后要求支持图片的预览，裁剪，放大和缩小，利用vue-cropper实现，elemeng-ui的上传组件之后是file文件类型，需要转换成base64在右侧区域进行展示预览。
// 组件dom结构，on-change钩子函数绑定
<el-upload
class="upload-demo"
drag
:show-file-list="false"
:auto-upload="false"
action="https://jsonplaceholder.typicode.com/posts/"
:on-change="previewImage"
multiple>
<div v-if="!loading" class="el-upload__text" style="font-size: 16px;color: #68718C;">将图片拖到此处，或<em>点击上传</em>或拍照</div>
</el-upload>file转base64，下图代码中的file参数为el-upload上传组件中钩子函数的file参数
var URL = null
if (window.createObjectURL !== undefined) {
URL = window.createObjectURL(file.raw)
} else if (window.URL !== undefined) {
URL = window.URL.createObjectURL(file.raw)
} else if (window.webkitURL !== undefined) {
URL = window.webkitURL.createObjectURL(file.raw)
}
this.option.img = URL
//option为组件vue-cropper中绑定的data值，img获得转化后的base64格式的URL就可以在cro-pperjs中进行展示预览使用cropper组件的钩子函数
clip(){//对图片进行裁剪
this.$refs.cropper.getCropData((data) => {
this.localUrl = data //img的src属性指定locaUrl就可以实现预览
console.log(data,'裁剪之后的图片地址')
sessionStorage.setItem('imageToBase64',this.localUrl)
// this.subFileList = this.dataURLtoFile(this.localUrl, this.file.name)
})
},做的宁外一个需求也是肖像上传，需要在本地实现预览功能，同时后台接口传递的是file文件类型，传参方式使用的FormData表单形式
预览的还是使用vue-cropper组件，效果如图，转化代码如下
// base64转file，dataurl为base64地址，filename为文件名称，自定义即可
dataURLtoFile(dataurl, filename) {
let arr = dataurl.split(',');
let mime = arr[0].match(/:(.*?);/)[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, {type:mime}, {uid: 1111111111111});
},总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。