用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还能做到压缩图片体积、加滤镜、裁决等...