一、file 、blob 转化成dataurl
function fileToDataURL(file) {
let reader = new FileReader()
reader.readAsDataURL(file)
// reader 读取文件成功的回调
reader.onload = function(e) {
return reader.result
}
}
比如,上传图片功能,用input选取图片后可用该方法获取文件的base64url地址,然后用img 标签,src赋值即可显示图片,可实现上传之前的图片预览
二、dataURL(base64) 转化成 Blob(二进制)对象
function dataURLToBlob(fileDataURL) {
let arr = fileDataURL.split(','),
mime = arr[0].match(/:(.*?);/)[1],
bstr = atob(arr[1]),
n = bstr.length,
u8arr = new Uint8Array(n);
while(n --) {
u8arr[n] = bstr.charCodeAt(n)
}
return new Blob([u8arr], {type: mime})
}
该方法是将base64转换成一个文件对象,参数是base64,比如后台接口不支持base64只能上传一个file对象,就可以用此方法,将返回的file用formdata形式上传
三、File, Blob 文件数据绘制到 canvas
// 思路:File, Blob ——> dataURL ——> canvas
function fileAndBlobToCanvas(fileDataURL) {
let img = new Image()
img.src = fileDataURL
let canvas = document.createElement('canvas')
if(!canvas.getContext) {
alert('浏览器不支持canvas')
return;
}
let ctx = canvas.getContext('2d')
document.getElementById('container').appendChild(canvas)
img.onload = function() {
ctx.drawImage(img, 0, 0, canvas.width, canvas.height)
}
}
四、从 canvas 中获取文件 dataURL
function canvasToDataURL() {
let canvas = document.createElement('canvas')
let canvasDataURL = canvas.toDataURL('image/png', 1.0)
return canvasDataURL
}
此方法是将canvas转换成dataurl ,比如 裁剪功能,用的是canvas裁剪,裁剪后用该方法返回图片的base64地址 显示图片