canvas.toDataURL生成图片转成文件

### 将Canvas Data URL 转换为 File 或 Blob 对象

为了实现将 `canvas.toDataURL` 生成的数据 URI 转换成 `File` 或者 `Blob` 对象以便于进一步处理或上传，可以采用如下方法：

#### 方法概述
数据URI可以通过特定函数转换成二进制形式的Blob对象。一旦有了Blob对象，则可以根据需求创建带有指定名称和类型的File对象。

#### 实现细节

对于从Data URL到Blob对象的转化过程，可利用JavaScript中的`fetch` API来获取资源并将其解析为Blob:

function dataURLToBlob(dataURL) {
    return fetch(dataURL).then(res => res.blob());
}

然而更高效的方法是直接解码Base64字符串，并构建相应的ArrayBuffer视图，从而避免不必要的HTTP请求开销[^4]:

function b64toBlob(b64Data, contentType='', sliceSize=512){
    const byteCharacters = atob(b64Data);
    const byteArrays = [];

    for (let offset = 0; offset < byteCharacters.length; offset += sliceSize) {
        const slice = byteCharacters.slice(offset, offset + sliceSize);

        const byteNumbers = new Array(slice.length);
        for (let i = 0; i < slice.length; i++) {
            byteNumbers[i] = slice.charCodeAt(i);
        }

        const byteArray = new Uint8Array(byteNumbers);
        byteArrays.push(byteArray);
    }
    
    return new Blob(byteArrays, {type: contentType});
}

// 使用上述定义好的辅助函数完成最终目的
async function convertCanvasToFile(canvasElement, fileName='output.png') {
    // 获取data url
    let dataUrl = canvasElement.toDataURL('image/png');
    
    // 去除"data:image/png;base64,"前缀部分
    let base64String = dataUrl.replace(/^data:image\/png;base64,/, "");
    
    // 创建blob对象
    let blob = b64toBlob(base64String , 'image/png');

    // 构建file对象
    let file = new File([blob], fileName, {type:'image/png'});
    
    console.log(file); // 输出file对象供调试查看
    
    return file;
}

此代码片段展示了如何先去除掉Data URL头部信息，再调用自定义的帮助函数`b64toBlob()`把剩下的base64编码串转化为实际图像内容表示——即Blob实例；最后基于这个Blob构造了一个具有给定名字的新File对象[^3].

#### 文件下载功能扩展
为了让用户能够方便地保存这些新创建出来的文件，在浏览器端还可以加入简单的触发下载逻辑：

function downloadFile(fileObject) {
    var aTag = document.createElement("a");
    aTag.href = URL.createObjectURL(fileObject);
    aTag.download = fileObject.name || "unnamed";
    aTag.click();
    setTimeout(() => URL.revokeObjectURL(aTag.href), 1000); // 清理临时url链接防止内存泄漏
}

通过这种方式不仅可以轻松获得由画布导出而来的高质量图片作为真实存在的文件实体，而且还能立即提供给访客一键点击下载的功能体验[^2].