1,先获取需要合成的海报和二维码。
2,获取图片的本地路径,如果图片不是网络连接则不需要此操作。
3,通过手机型号,根据屏幕的大小计算出海报的长宽比例,适配不同的手机。
4,操作小程序cavnas把二维码和海报,合成一张图。
设置好wxml页面
这里获取的海报图和二维码图片以网络链接为例子,手机型号以iphone 6s为标准做适配
微信内置接口wx.getImageInfo({})用来获取图片信息并获取图片的本地路径
wx.createCanvasContext创建画布,绘制上下文
需要注意的是:在自定义组件下,当前组件实例的this,表示在这个自定义组件下查找拥有 canvas-id 的 canvas ,如果省略则不在任何自定义组件内查找
canvasCode() {
wx.showLoading({
title: '生成二维码中',
mask: true
})
let that = this
let modal = wx.getSystemInfoSync(); // 获取手机信号以iphone 6s为例
let width = modal.windowWidth // 获取手机屏幕的宽度
// 根据手机屏幕比例计算出画布的高度
let height = modal.windowWidth * res.height / res.width
let scale = modal.windowWidth / 375
that.setData({
maskshow: true, // 显示装载海报的容器
reportHeight: height // 设置二维码海报的高度
})
const ctx = wx.createCanvasContext('codereport', this) // 创建画布
// 生成海报图
wx.getImageInfo({
src: that.data.bgimg, // 海报图的网络路径
success: function (res) {
let path = res.path // 获取海报图的本地路径
ctx.drawImage(path, 0, 0, width, height) // 将海报绘制进画布 top为0,left为0,设置海报的宽高
let codewidth = modal.windowWidth * 0.2 // 设置二维码宽度
let codeheight = codewidth // 设置二维码高度
let top = height * 0.83 // 设置二维码在海报里的向上偏移量
let left = modal.windowWidth * 0.15 // 设置二维码在海报里的向左偏移量
setTimeout(function () {
// 二维码图
wx.getImageInfo({
src: that.data.codeimg, // 二维码的网络路径
success: function (res) {
let code = res.path // 获取二维码的本地路径
ctx.drawImage(code, left, top, codewidth, codeheight) // 将二维码绘制进画布 top为0,left为0,设置海报的宽高
ctx.draw(that) // 把绘制好的图形画进canvas
wx.hideLoading()
wx.canvasToTempFilePath({ // 把当前画布指定区域的内容导出生成指定大小的图片,并返回文件路径
canvasId: 'codereport',
success: function (res) {
let tempFilePath = res.tempFilePath;
that.setData({
temporarycodeUrl: tempFilePath
})
console.log(that.data.temporarycodeUrl)
},
fail: function (res) {
console.log(res);
}
});
}
})
}, 0)
}
})
}
使用微信内置Api的wx.saveImageToPhotosAlbum({})保存图片到系统相册。使用之前必须先对手机相册授权
saveImg(e){
let that = this;
let url = e.currentTarget.dataset.url; // 获取海报的文件路径
setTimeout(function () {
wx.showLoading({
title: '保存中',
})
}, 0)
wx.saveImageToPhotosAlbum({
filePath: url, //图片文件路径
success(res) {
console.log(res);
setTimeout(function () {
wx.hideLoading()
}, 400)
setTimeout(function () {
wx.showToast({
title: '已保存到相册',
icon: 'success',
duration: 1500
})
}, 0)
that.setData({
maskshow: false,
})
wx.showTabBar({})
},
fail(res) { // 保存到本地失败,弹出相册授权框
console.log(res);
setTimeout(function () {
wx.hideLoading()
}, 400)
if (err.errMsg === "saveImageToPhotosAlbum:fail:auth denied" || err.errMsg === "saveImageToPhotosAlbum:fail auth deny") {
console.log("打开设置窗口");
setTimeout(function(){
wx.openSetting({
success(settingdata) {
console.log(settingdata)
if (settingdata.authSetting["scope.writePhotosAlbum"]) { // 授权成功
setTimeout(function(){
wx.showToast({
title: '再次长按保存',
icon: 'none',
duration: 1500
})
},0)
} else {
console.log("获取权限失败")
}
}
})
}, 0)
}
}
});
},