Blob实现与File DataURL canvas相互转换示例

目录

• 引言
• 一、概念介绍
• 二、相互转化
• 2-1. dataURL(base64) 转化成 Blob(二进制)对象
• 2-2. File、Blob 文件数据绘制到 canvas
• 2-3. File、Blob 转化成 dataURL
• 2-4. 从 canvas 中获取文件 dataURL

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})
}

// 思路：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)
    }
}

function fileToDataURL(file) {
    let reader = new FileReader()
    reader.readAsDataURL(file)
    // reader 读取文件成功的回调
    reader.Onload= function(e) {
      return reader.result
    }
}

function canvasToDataURL() {
    let canvas = document.createElement("canvas")
    let canvasDataURL = canvas.toDataURL("image/png", 1.0)
    return canvasDataURL
}