https://blog.csdn.net/g1531997389/article/details/79830030
https://developer.mozilla.org/zh-CN/docs/Web/API/Blob
HTMLCanvasElement.toDataURL() 方法返回一個包含圖片展示的 data URI 。可以使用 type參數(shù)其類型，默認為 PNG 格式生百。圖片的分辨率為96dpi
- 如果畫布的高度或寬度是0义黎，那么會返回字符串“data:,”官脓。
- 如果傳入的類型非“image/png”，但是返回的值以“data:image/png”開頭奕删，那么該傳入的類型是不支持的。
- Chrome支持“image/webp”類型爹梁。
語法
canvas.toDataURL(type[可選], encoderOptions[質量右犹，可選]);
/**
* 根據(jù)圖片 URL 直接獲取到 DataURL
**/
convertImgToDataURLviaCanvas (url, callback, outputFormat) {
const img = new Image()
img.crossOrigin = 'Anonymous' // canvas 不能處理跨域圖片，如果要處理姚垃，除了服務端要開啟跨域外，執(zhí)行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
