小程序 canvas 拼接图片 下载图片 海报 新版 旧版 版本库2.9
感谢
https://blog.csdn.net/weixin_47170010/article/details/123463994
需求是这样的
背景图叠加二维码图片,点击按钮后能够下载叠加后的图片
小程序html代码
<view class="addcar-box"> <view class="addcar-img-box"> <canvas id="share" type="2d" class="share"></canvas> </view> </view>
小程序js代码
流程就是
注:我的二维码是接口返回的base64,如果是图片路径,可以直接在base64赋值的地方改为图片url即可
1.先 获取canvas组件
2.添加背景图
3.添加二维码
4.点击按钮下载生成好的图片
Page({ /** * 页面的初始数据 */ data: { qrcode:'',//二维码base64 qrcode_bg:'https://xxx.xxx.xxx/uploads/move_car_bg.png',//背景图地址 bg_height:350,//背景图高度 bg_width:350,//背景图宽度 qr_height:150,//二维码高度 qr_width:150,//二维码宽度 qr_top:100,//二维码距离顶部距离 canvas:null, ctx:null }, /** * 生命周期函数--监听页面显示 */ onShow: function () {this.getqrcode() }, //获取二维码 getqrcode:function(){ let that = this
that.setData({
qrcode:'图片路径或者base64'
})
}, //创建挪车码合并图 createQR:function(){ let that = this let _x = (that.data.bg_width-that.data.qr_width)/2;//计算出二维码x坐标位置 var codeimgs = that.data.qrcode //生成的二维码图像
//下面注释的是老版本的,不建议使用,用的时候,canvas组件需要加上 canvas-id 属性,值为share(如下代码中的id)
// const ctx = wx.createCanvasContext('share'); //获取到canvas实例 // ctx.drawImage(that.data.qrcode_bg,0,0,that.data.bg_width,that.data.bg_height) //将背景图片绘制在画布上 // ctx.drawImage(codeimgs, _x, that.data.qr_top, that.data.qr_width,that.data.qr_height) //将二维码图片绘制在画布上 // ctx.draw() //保存修改 //新版写法 const query = wx.createSelectorQuery()
//获取canvas组件 query.select('#share') .fields({ node: true, size: true }) .exec((res) => { const canvas = res[0].node const ctx = canvas.getContext('2d')
//将canvas和ctx放到data中 that.setData({ canvas, ctx })
//获取设备像素比 下面 const dpr = wx.getSystemInfoSync().pixelRatio canvas.width = res[0].width * dpr canvas.height = res[0].height * dpr ctx.scale(dpr, dpr) //为了防止背景后生成,二维码先生成,导致背景图覆盖二维码,使用了promise new Promise(function(resolve, reject){
//创建一个图片 const bg = canvas.createImage()
//图片赋值具体url或者base64 bg.src = that.data.qrcode_bg
//当图片加载完成时 bg.onload = () => { // ctx.drawImage(bg,0,0,that.data.bg_width,that.data.bg_height) //将背景图片绘制在画布上 resolve(bg) } }).then(res=>{
//下面的代码同上,原理一样 ctx.drawImage(res,0,0,that.data.bg_width,that.data.bg_height) //将背景图片绘制在画布上 const qr = canvas.createImage() qr.src = that.data.qrcode qr.onload=()=>{ ctx.drawImage(qr,_x, that.data.qr_top, that.data.qr_width,that.data.qr_height) //将二维码图片绘制在画布上 // resolve(qr) } }) //绘制一个100像素的正方形 // ctx.fillRect(0, 0, 100, 100) }) }, //下载生成好的图片 hidePayLayer(e){ let that = this wx.canvasToTempFilePath({ // canvasId: 'share', //通过id 指定是哪个canvas 低版本用 canvas:that.data.canvas,//上一行的高版本替代 success(res) { wx.saveImageToPhotosAlbum({ //成功之后保存到本地 filePath: res.tempFilePath, //生成的图片的本地路径 success: function (res) { wx.showToast({ title: '保存成功', icon: 'success', duration: 2000 }) }, fail: function (res) { } }) } }) }, })
破罐子互摔