一.File对象与base64(URL)转换
1.File对象转base64(URL)
使用FileReader可将File对象中的内容读出,调用readAsDataURL()进行类型转换
模拟使用场景:
input框选择图片后生成的是file对象,若要将其显示在img标签中,需将其转换为URL形式。
核心函数:
FileReader() + readAsDataURL()
//假设已有一个文件对象【file】
if(window.FileReader){
var fr = new FileReader()
fr.readAsDataURL(file)
//fr.onload为异步函数
fr.onload = function (){
//
that.option.img【填保存url的变量】 = fr.result //fr.result可拿到转换后的url
}
}
2.base64(URL)转File对象
base64(URL)的格式形如:data:image/jpeg;base64,/XXXXXXXXXXXXXXXXXXXXX(编码部分),
可编写自定义的函数dataURLtoFile对其按格式切片后进行转换。
模拟使用场景:
前端当前有一个base64格式的文件,想将其转换为File对象后使用FormData发送
核心函数:
new File(fileParts,filename,[options])
//charCodeAt()方法可返回指定位置的字符的Unicode 编码
dataURLtoFile(dataurl, filename = 'file') {
let arr = dataurl.split(',')
let mime = arr[0].match(/:(.*?);/)[1] //切出文件类型
let suffix = mime.split('/')[1] //切出文件后缀
let bstr = atob(arr[1]) //返回ASCII编码
let n = bstr.length //获取编码长度
let u8arr = new Uint8Array(n) //创建一个无符号8位视图对象
while (n--) {
//还原unicode
u8arr[n] = bstr.charCodeAt(n)
}
return new File([u8arr], `${filename}.${suffix}`, {
type: mime
})
},
//使用示例:
const newFileObject = dataURLtoFile("待转换的URL","转换后的文件名")
二.Blob转File对象
一般使用场景为Blob转File对象
核心函数:
new File([Blob],filename,[options])
const blob = data //假设有一blob类型的数据data待转换
const newFileObject = new File([blob],"转换后的文件名", {type: blob.type})
三.Canvas转base64(URL)
使用场景:
当使用canvas绘制一幅图后,想将其用img标签显示,则需要将canvas先转换为DataURL
核心函数:
canvas.toDataURL(type, encoderOptions);
【encoderOptions】说明:
// 在指定图片格式为 image/jpeg 或 image/webp 的情况下,
// 可以从 0 到 1 的区间内选择图片的质量。
// 如果超出取值范围,将会使用默认值 0.92。其他参数会被忽略
//以压缩一张图片为例
cutImg() {
const that = this;
const canvas = document.createElement('canvas')
//图片最后的宽高 可自定义
canvas.width = 200
canvas.height = 200
const ctx = canvas.getContext('2d')
const img = document.createElement('img')
img.src = "待切图的URL路径"
//清除canvas原始缓存
img.setAttribute("crossOrigin", 'Anonymous')
img.onload = function () {
//绘制图片,坐标需与width和height对应
ctx.drawImage(this, 0, 0, 200, 200)
//调用toDataURL可获取到图片的base64数据
//可指定文件的类型和生成图片的质量
that.OriginCut = canvas.toDataURL('image/jpeg',0.92)
console.log("切图成功")
// console.log(canvas.toDataURL())
}
},