file、Blob、dataUrl 相互转化

一、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地址 显示图片