关于 toDataURL

https://blog.csdn.net/g1531997389/article/details/79830030
https://developer.mozilla.org/zh-CN/docs/Web/API/Blob

HTMLCanvasElement.toDataURL() 方法返回一个包含图片展示的 data URI 。可以使用 type参数其类型，默认为 PNG 格式。图片的分辨率为96dpi

• 如果画布的高度或宽度是0，那么会返回字符串“data:,”。
• 如果传入的类型非“image/png”，但是返回的值以“data:image/png”开头，那么该传入的类型是不支持的。
• Chrome支持“image/webp”类型。

语法

canvas.toDataURL(type[可选], encoderOptions[质量，可选]);

返回值
包含 data URI 的DOMString

    /**
    * 根据图片 URL 直接获取到 DataURL
    **/
    convertImgToDataURLviaCanvas (url, callback, outputFormat) {
        const img = new Image()
        img.crossOrigin = 'Anonymous' // canvas 不能处理跨域图片，如果要处理，除了服务端要开启跨域外，执行canvas操作前也要开启跨域
        img.onload = function() {
            let canvas = document.createElement('canvas')
            const ctx = canvas.getContext('2d')
            let dataURL = ''
            canvas.height = this.height
            canvas.width = this.width
            ctx.drawImage(this, 0, 0)
            dataURL = canvas.toDataURL(outputFormat)
            callback(dataURL)
            canvas = null
        }
        img.src = url
    }

image.png