微信小程序canvas怎么绘制带二维码海报并预览保存到相册？

小程序生成带二维码的海报效果预览：

项目需求：

需要根据用户信息生成用户个人二维码，后台提供海报素材，将用户二维码画在海报上，并可预览海报，长按保存海报，方便用户分享或者发朋友圈。

涉及到的相关API：

wx.getImageInfo()----获取图片信息
wx.getSystemInfo()----获取系统信息，包括屏幕宽高，设备型号，设备像素比等
wx.canvasToTempFilePath()----把当前画布指定区域的内容导出生成指定大小的图片
wx.saveImageToPhotosAlbum()----保存图片到系统相册。
canvas渲染相关api

注意事项：

小程序的canvas基本实现了H5的canvas方法，包括往画布画图片，导成图片等，因此可直接使用小程序的canvas相关api。
小程序绘制二维码在网上找的插件
小程序canvas与image组件默认宽度300px、高度225px
小程序canvas相关的api中单位为px，并非rpx，因此在业务实现过程中可根据需要处理适配
小程序canvas对跨域图片不支持，需要先将图片缓存到本地（网络图片上线的时候还需要配置downloadFile域名），本地图片不需要调用getImageInfo()方法进行本地缓存

实现过程：

1.首先根据个人信息绘制二维码，绘制二维码使用的插件weapp-qrcode，具体实现过程可参考上一篇文章小程序开发笔记《五》生成二维码，然后将绘制的二维码画布导出图片并拿到图片本地临时链接，方便后续在海报上画二维码的时候调用。
2.获取设备屏幕信息，计算出海报预览时图片的宽高，因为image组件有默认宽度300px、高度225px，如果不计算的话图片以固定尺寸呈现可能会变形。
3.绘制canvas，在定义好的canvas上先绘制海报底图，这个例子底图与绘制的画布尺寸相同，然后将用户二维码绘制到海报的右下角。
4.设置海报的导出尺寸，将canvas内容导出生成指定尺寸的图片。注意：wx.canvasToTempFilePath必须要在draw的回调中执行，否则会生成失败，官方文档有说明，需要将生成的图片路径存下来，方便长按保存的时候直接拿图片路径进行操作
5.长按将图片保存到系统相册

踩坑记录：

1.在二维码中间绘制logo图片：如果使用的是网络地址的图片, 需要先使用 wx.getImageInfo 去获取图片信息；
2.利用 x,y 可以画出有 padding 感觉的二维码图片；
3.直接在callback中调用 wx.canvasToTempFilePath 在部分安卓机上转出来的二维码图片异常(不完整),二维码扫不出来，需要设置计时器；

实现代码：

index.wxml:

index.js:

import drawQrcode from '../../utils/weapp.qrcode.js'

Page({
  data: {
    shareUrl: "https://www.baidu.com/",
    shareQrcodeImage: "",
    shareQrcodeWidth: 200,
    shareQrcodeHeight: 200,
    haibaoBgUrl: "https://upload-images.jianshu.io/upload_images/13079544-96b37469be760003.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240",
    haiBaoWidth: 750, //海报默认宽
    haiBaoHeight: 1334, //海报默认高
    haiBaoShowHeight: 0,
    qrcode_x: 600, //二维码据左上角x轴距离
    qrcode_y: 980, //二维码据左上角Y轴距离
    display: 'none',
    user_id: 1
  },
  onLoad: function() {
    var that = tShopfas;
    //生成专属二维码
    that.createQrCode();
    //获取屏幕信息
    wx.getSystemInfo({
      success(res) {
        that.setData({
          windowWidth: res.windowWidth,
          windowHeight: res.windowHeight
        })
      }
    });
  },
  ShopfadeModal: function() {
    tShopfas.setData({
      display: "none",
      position: ""
    })
  },
  /**生成200*200的二维码，上下左右各留20px的白边 */
  createQrCode: function() {
    var tShopfas_ = tShopfas;
    drawQrcode({
      width: 160,
      height: 160,
      x: 20,
      y: 20,
      canvasId: 'myQrcode',
      // ctx: wx.createCanvasContext('myQrcode'),
      typeNumber: 10,
      text: tShopfas_.data.shareUrl + tShopfas_.data.user_id,//二维码的链接携带个人信息，根据实际业余需求做修改
      image: {
        imageResource: '../../images/mini_app_logo.png',
        dx: 70,
        dy: 70,
        dWidth: 60,
        dHeight: 60
      },
      callback(e) {
        // 导出图片
        setTimeout(() => {
            wx.canvasToTempFilePath({
              x: 0,
              y: 0,
              width: tShopfas_.data.shareQrcodeWidth,
              height: tShopfas_.data.shareQrcodeHeight,
              destWidth: tShopfas_.data.shareQrcodeWidth,
              destHeight: tShopfas_.data.shareQrcodeHeight,
              canvasId: 'myQrcode',
              success(res) {
                console.log('二维码的临时url：', res.tempFilePath)
                let tempFilePath = res.tempFilePath
                tShopfas_.setData({
                  shareQrcodeImage: tempFilePath
                })
              }
            })
        },100)
      }
    })
  },
  createHB: function(e) {
    var that = tShopfas;
    that.setData({
      display: 'block'
    });
    if (that.data.shareImgSrc) {
      //已画过就不再画
      return;
    }
    wx.showLoading({
      title: '生成中',
    })
    var imgUrl = that.data.haibaoBgUrl;
    var codeX = that.data.qrcode_x;
    var codeY = that.data.qrcode_y;

    wx.getImageInfo({
      : imgUrl,
      success(res) {
        console.log("res.path:" + res.path)
        const ctx = wx.createCanvasContext('myCanvas');
        //二维码
        var qrcodeImg = that.data.shareQrcodeImage;
        // 海报显示最大宽高
        var screenW = that.data.windowWidth - 30;
        var screenH = that.data.windowHeight - 30;
        var bgW = res.width; // 海报实际宽
        var bgH = res.height; // 海报实际宽

        var haiBaoShowWidth_ = screenW;
        var haiBaoShowHeight_ = screenH
        if (bgW

index.wxss:

/**index.wxss**/
.main {
  margin-top: 200px;
}
.modal-mask {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: #000;
  z-index: 1001;
  -moz-opacity: 0.7;
  opacity: 0.70;
  filter: alpha(opacity=70);
  overflow: Shopfadden;
}

.image-modal .modal-main {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  padding: 15px;
  box-sizing: border-box;
  background-color: transparent;
  z-index: 1002;
}
.myQrcode,.canvas-box {
  height: 100%;
  width: 100%;
  position: fixed;
  left: 0;
  top: 999999rpx;
}

代码已上传，可直接下载
原文作者技术博客：https://www.jianshu.com/u/ac4daaeecdfe

<以上资讯仅供参考，如果您需解决具体问题，建议您关注作者；如果有软件产品开发需求，可在线咨询加速度产品经理获取方案和报价>

****更多行业产品开发方案，请关注jsudo加速度 https://www.jsudo.com***