用canvas把圖片轉為base64程式碼

最近接到一個需求，其中需要把網路圖片的連結轉換為base64的地址。
其中，用canvas可以很方便的實現這個要求。

let basePath //圖片base64地址
let $img = new Image()
$img.onload = () => {
    let canvas = document.createElement(`canvas`)
    canvas.width = $img.width
    canvas.height = $img.height
    let ctx = canvas.getContext("2d")
    ctx.drawImage($img, 0, 0)
    
    basePath = canvas.toDataURL()
}
$img.setAttribute(`crossOrigin`, `anonymous`)
$img.src = _icon

需要注意的兩點：
1、canvas需要設定寬高，不然會瀏覽器會自動設定畫布大小，和圖片大小不一致
2、如果圖片跨域，需要設定$img.setAttribute(`crossOrigin`, `anonymous`)，前提是伺服器支援跨域獲取圖片

這是canvas中的一個小功能，canvas還能做到壓縮圖片體積、加濾鏡、裁決等…