uniapp掘墓者之context.drawImage方法

这两天在做一个前端使用canvas生成海报，好家伙，一个问题整了快一周

需求是这样的：后台给我返回一个背景图在服务器上的地址 http://xxx.com/img/1.jpg，还有一个二维码所在的 x轴 和 y轴，二维码的内容

前端拿到这些之后

先把背景图画在canvas上

然后通过 qrcode 或者别的技术生成二维码

然后再通过x轴和y轴将二维码画在canvas上

//先获取到canvas   第一个参数是template中写好的canvas的id
let context = uni.createCanvasContext('canvas', _this)
//参数分别为 背景图地址  x轴  y轴  宽  高
context.drawImage(background.url, 0, 0, background.w, background.h);
context.save();
//参数分别为 二维码  x轴  y轴  宽  高
context.drawImage(qrImage, x, y, size, size)
context.save()
context.draw(false,()=>{
    // 这里执行一些方法,不是重点,不详细说明
})

// 后来发现背景图在app端总是画不出来，二维码可以
// 经过几天的苦苦奋战，终于发现

• 由于二维码是 qrcode 生成的，所以二维码是 base64 加密的，而背景图是服务器的地址，经查询，发现 drawImage 的第一个参数不能是网络图片，如果是网络图片必须先使用 uni.downloadFile 下载下来，这里我为了统一，使用的 image-tools 的 pathToBase64 将下载的图片再转为 base64 去绘制，问题就迎刃而解了

  ---

  用到的API

• qrcode生成二维码，点此查看
• uni.downloadFile，点此查看
• image-tools，点此查看

---

如果还有什么问题，可以加入QQ群我们一起讨论

个人博客：点此进入（http://xueshuai.top）

前端交流群：1063233592

前端交流群：1063233592