小程序画布合成二维码海报图，并保存到相册

实现效果如下图：

步骤分析

1，先获取需要合成的海报和二维码。

2，获取图片的本地路径，如果图片不是网络连接则不需要此操作。

3，通过手机型号，根据屏幕的大小计算出海报的长宽比例，适配不同的手机。

4，操作小程序cavnas把二维码和海报，合成一张图。

设置好wxml页面

<button bindtap="canvasCode">海报合成</button><view class="haibao" style="width:100%;"><canvas class="canvas" canvas-id="codereport" style="width:100%;height:{{ reportHeight }}px" bindtap="closeImg"></canvas><button class="savecanvas" data-url="{{ temporarycodeUrl }}" bindtap='saveImg'>保存图片</button></view>

实现效果逻辑代码

这里获取的海报图和二维码图片以网络链接为例子，手机型号以iphone 6s为标准做适配

微信内置接口wx.getImageInfo({})用来获取图片信息并获取图片的本地路径

wx.createCanvasContext创建画布，绘制上下文

需要注意的是：在自定义组件下，当前组件实例的this，表示在这个自定义组件下查找拥有 canvas-id 的 canvas ，如果省略则不在任何自定义组件内查找

一，绘制二维码海报

canvasCode() {wx.showLoading({title: '生成二维码中',mask: true})let that = thislet modal = wx.getSystemInfoSync();// 获取手机信号以iphone 6s为例let width = modal.windowWidth// 获取手机屏幕的宽度// 根据手机屏幕比例计算出画布的高度let height = modal.windowWidth * res.height / res.width let scale = modal.windowWidth / 375that.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) // 把绘制好的图形画进canvaswx.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)}}});},