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[质量，可选]);
/**
* 根据图片 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
