1、需求场景
很多时候,前端需要将二维码和背景图片组合,然后生成一张海报,供用户下载分享
2、功能实现
- 使用canvas绘制海报
- 调用canvas的toDataURL()方法,生成base64编码
- 上传到图片服务器(移动端直接下载base64会报错)
- 实现下载
// 使用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)