图片file文件---二进制文件--base64的相互转化(vue)
图片file文件---二进制文件--base64的相互转化(vue)
·
1、file-----二进制文件
/**
* file => base64
* @param {*} file
*/
export function asyncFileToBase64(file) {
return new Promise((resolve, reject) => {
const reader = new FileReader()
reader.readAsDataURL(file)
reader.onload = (e) => {
// target.result 该属性表示目标对象的DataURL
resolve(e.target.result)
}
})
}
/**
* imageFile => base64
* @param {*} file
*/
export function asyncImage2Base64(file) {
return new Promise((resolve, reject) => {
const img = new Image()
img.src = file
img.onload = function() {
var canvas = document.createElement('canvas')
canvas.width = img.width
canvas.height = img.height
var ctx = canvas.getContext('2d')
ctx.drawImage(img, 0, 0, img.width, img.height)
var ext = img.src.substring(img.src.lastIndexOf('.') + 1).toLowerCase()
var dataURL = canvas.toDataURL('image/' + ext)
resolve(dataURL)
// console.log(11,dataURL)
}
})
}
2、二进制-----转文件
/**
* 二进制转文件
* @param {*} blobs blob对象
* @param {*} fileName 文件名
*/
export function blob2File(blobs, fileName) {
const blob = new Blob([blobs])
const href = window.URL.createObjectURL(blob) // 创建下载的链接
const aEle = document.createElement('a') // 创建a标签
aEle.href = href
aEle.download = fileName // 下载后文件名
document.body.appendChild(aEle)
aEle.click() // 点击下载
document.body.removeChild(aEle) // 下载完成移除元素
window.URL.revokeObjectURL(href) // 释放掉blob对象
}
3、base64-----二进制
/**
* 将base64编码转换为二进制文件
* @param {*} base64
*/
export function base642File(base64) {
const arr = base64.split(',')
const mime = arr[0].match(/:(.*?);/)[1]
const bstr = atob(arr[1])
let n = bstr.length
const u8arr = new Uint8Array(n)
while (n--) {
u8arr[n] = bstr.charCodeAt(n)
}
return new Blob([u8arr], { type: mime })
}
更多推荐
已为社区贡献14条内容
所有评论(0)