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

相关资源：python入门教程(PDF版)