小程序canvas生成海报

接触电商项目应该都知道，一般商品，活动都有生成海报的功能，海报上带有二维码的时候，在微信长按就可以识别跳转，很方便。但是这个功能怎么实现的呢？

两种方式：

• 后端生成，直接返回可访问的海报连接，前端可以下载保存到系统本地
• 前端生成，根据后端接口返回的素材，合成为一张海报，保存到系统本地

今天给出一个小程序前端生成海报的实例

wxml的代码中定义一个canvas

//点击按钮触发create事件生成海报，保存到本地
<view class="share" bindtap="create">分享给好友</view>

<canvas canvas-id="qrcode" style="width: 750px;height:1210px;position: fixed;top: -10000px;"></canvas>

js的代码

const http = require("../../utils/http");

Page({

  /**
   * 页面的初始数据
   */
  data: {
    avatar: '', //用户头像网络路径
    avatar_path: '', //用户头像本地临时路径
    code: '', //邀请码
    er_code: '', //二维码网路路径
    er_code_path: '', //二维码本地临时路径
    desc: '分享好友共享千万补贴~', //描述话语
    backgrond: '/images/bgfenx.png', //海报底图路径
    backgrond_path: '', //海报底图本地临时
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function () {
    var that = this;
    // 接口获取素材
    http.post("index/user/getPromotion", {}, function(res) {
      that.setData({
        code:res.data.code,
        er_code:res.data.er_code
      });
      // 下载二维码到临时路径
      wx.getImageInfo({
        src: res.data.er_code,
        success(res) {
          that.setData({
            er_code_path: res.path
          })
        }
      })
    })
    // 获取用户信息
    http.post("index/user/getUserInfo", {}, function(res) {
      that.setData({
        avatar:res.data.avatarUrl
      });
      // 下载用户头像为临时路径
      wx.getImageInfo({
        src: res.data.avatarUrl,
        success(res) {
          that.setData({
            avatar_path: res.path
          })
        }
      })
    })
    // 生成海报底图本地临时
    wx.getImageInfo({
      src: that.data.backgrond,
      success(res) {
        that.setData({
          backgrond_path: res.path
        })
      }
    })
  },

  /**
   * 生成海报事件
   */
  create: function() {
    var that = this;
    wx.showLoading({
      title: "海报生成中...",
    })
    // canvas-id="qrcode"
    const context  = wx.createCanvasContext('qrcode');
    // 海报底图
    context.drawImage(that.data.backgrond, 0, 0, 750, 1210);
    // 二维码
    context.drawImage(that.data.er_code_path, 200, 590, 350, 350);
    context.save();
    // 用户头像并切成圆的
    context.beginPath();
    context.arc(148 / 2 + 301 , 148  / 2 + 100 , 148 / 2, 0, Math.PI * 2, false);
    context.clip();
    context.drawImage(that.data.avatar_path, 301, 100, 148, 148);
    context.restore();
    // 描述文字
    context.setFontSize(30);
    context.setFillStyle('#333');
    context.setTextAlign('left');
    context.fillText(that.data.desc, 210, 440);
    context.save();
    // 邀请码
    context.setFontSize(60);
    context.setFillStyle('#EA5513');
    context.setTextAlign('left');
    context.fillText(that.data.code, 210, 350);
    context.save();
    // 海报开始描绘
    context.draw(true, function(){
      wx.canvasToTempFilePath({
        canvasId: 'qrcode',
        success: function (res) {
          console.log(res);
          var tempFilePath = res.tempFilePath;
          wx.hideLoading();
          that.checkAuth(function(){
            wx.saveImageToPhotosAlbum({
              filePath: tempFilePath,
              success() {
                wx.showToast({
                  title: '海报保存成功，快去分享到朋友圈吧~',
                  icon: 'none',
                  duration: 2000
                })
              },
              fail() {
                wx.showToast({
                  title: '保存失败',
                  icon: 'none',
                  duration: 2000
                })
              }
            })
          });
        }
      });
    });
  },

  /**
   * 检查将图片保存到系统的权限
   */
  checkAuth: function(next){
    wx.openSetting({
      success: function(result) {
        if (result) {
          if (result.authSetting["scope.writePhotosAlbum"] === true) {
            next()
          } else {
            wx.authorize({
              scope: 'scope.writePhotosAlbum',
              success() {
                next()
              }
            })
          }
        }
      },
      fail: function(result) {
        console.log(result);
        wx.authorize({
          scope: 'scope.writePhotosAlbum',
          success() {
            next();
          },
          fail() {
            wx.showToast({
              title: '请设置允许访问相册',
              icon: 'none',
              duration: 2000
            })
          }
        })
      }
    });
  }

})

示例效果