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-toolspathToBase64 将下载的图片再转为 base64 去绘制,问题就迎刃而解了

    用到的API

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

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

个人博客:点此进入(http://xueshuai.top)

前端交流群:1063233592

前端交流QQ群:1063233592
前端交流群:1063233592
已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页