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

实现效果如下图：
在这里插入图片描述

步骤分析

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 * 16 / 9      // 这里的手机屏幕比例我以16:9为例                 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)}}});},