感谢
背景图叠加二维码图片,点击按钮后能够下载叠加后的图片
小程序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) {
}
})
}
})
},
})
破罐子互摔
