上条博客已经介绍了如何云调用生成小程序码，链接地址：
https://blog.csdn.net/mingjuna2010/article/details/92796711
这条博客我们来介绍小程序中怎么生成长图，如何预览，并且在长图中绘制小程序码，以及小程序码中间的默认logo换成自定义logo。
①首先在页面上 index.wxml 准备一个画布，画布的宽度设定，高度不定。由于高度不定，所以预览时画布是不显示在页面上的，只提供画图功能，显示在页面上的是image标签，外层使用swiper-view，进行长图的上下滑动预览，视觉效果加上蒙层，代码如下：
!-- 显示在页面上的image标签，即长图 --scroll-view class="temp_day_box" style='max-height:900rpx;' scroll-y wx:if="{{sharing}}" view image class="canvas_img" style='height:{{height*2}}rpx' src='{{shareImgSrc}}'/image /view/scroll-view!--显示长图是背景变暗，即蒙层--view class="mask" catchtap='shareStop' catchtouchmove='preventTouchMove' wx:if="{{sharing}}"/view!-- 不显示在页面上的画布--canvas class='canvasHigh' style="height:{{height*2}}rpx" canvas-id='share'/canvas②在index.js文件中的data里面定义相应的参数，代码如下：
data: { height: '', //长图的高度 sharing:false, //控制长图是否显示 shareImgSrc:'', //最终长图（包括背景图，换过中间logo的小程序码） shareDocuments:'' //后端获取的长图的背景图 }, // 蒙层关闭事件 shareStop() { this.setData({sharing: false}) },③在index.wxss里面添加画布样式，此时画布是不显示在页面上的，只是提供画图的功能，所以样式中设置了画布的宽度，并且使用固定定位将其移出屏幕，代码如下：
.canvasHigh { position: fixed; left: -9999rpx; top: -9999rpx; width: 600rpx;}.temp_day_box { width: 600rpx; position: fixed; top: 100rpx; left: 10%; z-index: 999;}.canvas_img { width: 600rpx;}④以上三步准备工作已经就绪，接下来就详细讲述shareImgSrc怎么产生的，index.js代码如下：
// 长图+二维码显示 drawPage() { let _this = this // 获取图片信息（宽高） wx.getImageInfo({ src: this.data.shareDocuments[0].url, //这是长图的背景图，从服务端获取，这里就不详细赘述 success(res) { _this.setData({ height: res.height, //背景图的高度 width: res.width //背景图的宽度 }) const ctx = wx.createCanvasContext("share"); //获取上下文对象 ctx.drawImage(res.path, 0, 0, 300, _this.data.height); //绘制背景图 let that = _this wx.getImageInfo({ src: that.data.code, //之前获取的小程序码 success(res) { ctx.drawImage(res.path, 150, that.data.height - 150, 125, 125); //绘制小程序码 let index = that wx.getImageInfo({ src: index.data.orgLogo, //需要替换的logo，从服务端获取，这里就不详细赘述 success(res) { console.log("绘制中间logo") ctx.beginPath() //开始创建一个路径 ctx.setStrokeStyle('rgba(0,0,0,0)') //画笔颜色换成透明 ctx.arc(212.5, index.data.height - 87.5, 31.25, 0, 2 * Math.PI, false) //画一个圆形裁剪区域 ctx.stroke(); ctx.clip() //裁剪 ctx.drawImage(res.path, 181.25, index.data.height - 118.75, 62.5, 62.5); //绘制小程序码中间logo //最后将所有的绘制好的图片画出来，注意如果不需要保存的长图，可以直接ctx.draw()，但是需要保存的长图，需要先调用wx.canvasToTempFilePath这个API。 ctx.draw(true, function () { wx.canvasToTempFilePath({ x: 0, y: 0, width: 300, height: that.data.height, destWidth: 300, destHeight: that.data.height, canvasId: 'share', success(res) { that.setData({ shareImgSrc: res.tempFilePath }) } }) }); } }) } }) } }) },⑤接下来讲述一下如何保存长图，这个就比较简单了，index.js代码如下：
// 保存长图 saveLongImage(){ let _this = this wx.saveImageToPhotosAlbum({ filePath: _this.data.shareImgSrc, success(res) { wx.showToast({ title: '保存成功', icon: 'success',})//保存长图成功之后，1.5s之后关闭蒙层和长图 setTimeout(function () { _this.shareStop() }, 1500) } }) },
