工具类的解析&封装

new Image()的用途

图片预加载

原理：创建image对象，将image对象的src分别指向需加载的图片地址，图片被请求，因为image对象没有显示在页面上，所以不会对页面布局产生影响。

URL.createObjectURL()

URL.createObjectURL() 静态方法会创建一个DOMString的 URL 对象。

参数object：用于创建 URL 的 File 对象、Blob 对象或者 MediaSource 对象。、

返回值：一个DOMString包含了一个对象 URL，该 URL 可用于指定源 object的内容。

内存管理：通过调用 URL.revokeObjectURL() 方法来释放

采用 canvas.toBlob导出图片

HTMLCanvasElement.toBlob()方法创造 Blob 对象，用以展示 canvas 上的图片；这个图片文件可以被缓存或保存到本地（由用户代理自行决定

将canvas绘制好的东西导出成图片，一般都是习惯性的采用 HTMLCanvasElement.toDataURL()-Web APIs | MDN 方法。最近发现，其实这个方法，很早就不是最佳选择了，早该摒弃掉，而选用
HTMLCanvasElement.toBlob() - Web APIs | MDN 方法。

区别：

• toDataURL 是将图片导出生成 base64 字符串；而 toBlob 是将图片导出生成二进制文件，处理速度会快很多
• toDataURL 是同步执行，直接返回结果；而 toBlob 则是异步操作，接收一个回调函数。同步会阻塞进程，而异步则不会，好处不言而喻。

 async exportCanvasToBlob({width, height, type = 'image/jpeg', quality}){
    const {$canvas_tmp, ctx_tmp} = canvasRenderHelper.offCanvas({width, height})
    ctx_tmp.drawImage(this.$canvas, 0, 0);
    return new Promise((resolve)=>{
        $canvas_tmp.toBlob(resolve, type, quality);
        
        // 常规操作
        // $canvas_tmp.toBlob &&  $canvas_tmp.toBlob(function(blob) {
        //     var url = URL.createObjectURL(blob);
        //     var newImg = new Image();
        //     newImg.onload = function() {
        //       URL.revokeObjectURL(url)
        //     };
        //     newImg.src=url;
        // }, type)
    })
}

blob转成file

主要是使用file的构造函数let file = new window.File([blob], filename, filetype)

export const Blob2ImageFile = (blob, {name, type}) => {
    return new window.File([blob], `${name}`, { type: type || blob.type});
}

toBlob() & blob转成file 的运用

canvas绘制的图通过toBlob()转成Blob对象后再转成file对象，然后可上传到七牛/腾讯云。