web端实现图片下载

1、需求场景

很多时候，前端需要将二维码和背景图片组合，然后生成一张海报，供用户下载分享

2、功能实现

1. 使用canvas绘制海报
2. 调用canvas的toDataURL()方法，生成base64编码
3. 上传到图片服务器（移动端直接下载base64会报错）
4. 实现下载

 // 使用a标签方式下载
 const dlLink = document.createElement('a')
 dlLink.download = 'fileName'
 // 图片的url后面，必须加上后缀，否则会直接打开图片，不是下载图片
 dlLink.href = serveUrl + '?response-content-type=application/octet-stream'
 document.body.appendChild(dlLink)
 dlLink.click()
 document.body.removeChild(dlLink)