微信小程序之实现两张图片合成一张并保存到相册

本文介绍了如何在微信小程序中实现两张图片合成为一张,并保存到相册。重点讲解了drawImage方法的使用,强调了图片必须为本地资源,坐标和尺寸单位为像素,并分享了解决iOS和Android平台遇到的问题,如隐藏canvas可能导致的绘制失败,以及用户多次点击导致的卡死问题。
摘要由CSDN通过智能技术生成

不喜欢看废话的小伙伴,可以直接看图片下面的文字和注意事项 实现是没问题的。

应用场景:

项目中,每个用户都会生成自己专属的小程序码,当用户扫描这个小程序码的时候,默认这个用户就会成为你的好友,,嗯,举个身边的例子,比如现在最火的 [邀好友领红包],通过扫描二维码确定绑定关系。(不要纠结为啥放这张图片,因为刚好昨天我妹妹发我,让我给她扫一扫,?栗子放在这里 感觉会更加清楚一点,有点广告嫌疑 哈哈哈哈 可以忽略 )。

在小程序中,我们可以生成带参的小程序码,但是呢,这个小程序码是一张小程序码图片,如果想要和产品放在一张图上,前端不做,后端做,反正总要有人做,然后,,决定让前端来做。ok,动起来,开始干。
在这里插入图片描述

结合文档和度娘,发现可以用canvas来实现,发现用两个函数就可以搞定, CanvasContext.drawImage画出你想画的图片
wx.canvasToTempFilePath把画布的内容输出为图片

实际效果:

两张独立的图片,根据需要绘制在指定位置,合成一张图片,并保存到相册。

效果图

注意事项:

CanvasContext.drawImage

drawImage(imageResource, dx, dy)
drawImage(imageResource, dx, dy, dWidth, dHeight)
drawImage(imageResource, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight) 从1.9.0 起支持

imageResource,绘制的图片的路径,必须是本地图片,如果是网络图片,必须用wx.downloadFile获取本地图片的缓存后再绘制。
dx、dy图片的位置,画布左上角为原点(0,0),注意是画布的坐标原点而不是以手机屏幕为准。
dWid

  • 21
    点赞
  • 50
    收藏
    觉得还不错? 一键收藏
  • 7
    评论
评论 7
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值