微信小程序生成指定页面小程序码海报图片分享思路总结

　　本博客主要说下思路，具体代码不贴

1、考虑到组件复用，所以我把它做成一个自定义的组件

<my-poster id="getPoster" avater="{{imageUrl}}" knowledges="{{klPoster}}" scene="{{topicId}}">
</my-poster>

　　可以传图片avater、文字内容knowledges、页面参数scene

2、组件里面首先是得需要一个画布。

　　画布外可以正常写元素标签，定义样式

<view class="mask_screen" wx:if="{{showpost}}">
  <view class='poster_box'>
    <view class='poster_content' id='canvas-container'>
      <canvas canvas-id="myCanvas" style="width:100%;height:{{canvasHeight}}px;" />
    </view>
    <view class='tips'>保存图片，分享给小伙伴吧</view>
    <view class='save' bindtap='saveShareImg'>
      <image class='down' mode='widthFix' src='../../assets/dbs/down.png'></image>
      <text>保存</text>
    </view>
    <image class='close'  bindtap='closePoste' mode='widthFix' src='../../assets/dbs/close.png'></image>
  </view>
</view>

3、画布准备好之后，就是需要准备画图的一些资源，比如图片之类的

　　网络图片需利用微信接口 wx.downloadFile 下载下来之后，获取图片的临时地址，根据该临时地址才可以画图；

　　如果是工程类图片，只需要写好路径，即可以画图。比如：

    // 网络图片
    if (topicImage) { wx.downloadFile({ url: topicImage, success: function(res) { wx.hideLoading(); if (res.statusCode === 200) { var productSrc = res.tempFilePath; that.calculateImg(productSrc, function(data) { that.getCode(productSrc, data) }) } } }) } // 工程内图片
let dbicon = '../../assets/dbs/' + item.type + '.png'; ctx.drawImage(dbicon, 15, offsetHeight + 10, 10, 10)

4、有些图片可能要计算宽高的，需要利用微信接口 wx.getImageInfo 获取图片宽高等信息，wx.getSystemInfo 获取手机屏幕宽高等信息，根据比例去计算绘制

//计算图片尺寸
 calculateImg: function(src, cb) { var that = this; wx.getImageInfo({ src: src, success(res) { wx.getSystemInfo({ success(res2) { var ratio = res.width / res.height; var imgHeight = res2.windowWidth * 0.6 / ratio; // var screeRratio = res2.screenWidth / res2.screenHeight
 that.setData({ canvasHeight: imgHeight + 280
                // canvasHeight: res2.windowWidth * 0.5 / screeRratio
 }) cb(imgHeight); } }) } }) }

5、再就是获取页面的小程序码，微信文档有介绍：三种接口获取方式

　　获取小程序码：https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/qr-code.html

6、绘制文字换行问题，上一篇有介绍

7、图片生成之后，保存图片。主要利用微信接口 wx.canvasToTempFilePath 和 wx.saveImageToPhotosAlbum

//点击保存到相册
 saveShareImg: function() { var that = this; wx.showLoading({ title: '正在保存', mask: true, }) setTimeout(function() { wx.canvasToTempFilePath({ canvasId: 'myCanvas', success: function(res) { wx.hideLoading(); var tempFilePath = res.tempFilePath; wx.saveImageToPhotosAlbum({ filePath: tempFilePath, success(res) { wx.showModal({ content: '图片已保存到相册，赶紧晒一下吧~', showCancel: false, confirmText: '好的', confirmColor: '#333', success: function(res) { that.closePoste(); if (res.confirm) {} }, fail: function(res) { console.log(res) } }) }, fail: function(res) { wx.showToast({ title: res.errMsg, icon: 'none', duration: 2000 }) } }) }, fail: function(err) { console.log(err) } }, that); }, 1000); },

8、注意事项：

（1）图片要提前下载：这里面有一个问题就是，图片要提前下载完之后再绘图，不然图片显示不出来，可以把下载图片的方法单独拎出来，然后下载图片后回调绘图方法。

（2）ctx.draw()，这个方法是在绘制完成之后在调用，不然容易其它被覆盖。

　　大致思路就是如此。