微信小程序生成海报图片 小程序生成海报教程

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

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

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

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

  
    
      
    
    保存图片，分享给小伙伴吧
    
      
      保存
    
    
  

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、再就是获取页面的小程序码。

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()，这个方法是在绘制完成之后在调用，不然容易其它被覆盖。

如果你也想开发一款属于自己的微信小程序，可以通过第三方专业开发平台，来帮助你实现开发需求：厦门在乎科技-专注小程序、app、网站开发