Wx-小程序-使用canvas截圖保存

1、 wxml 頁面

使用畫布來站位，並給按鈕添加綁定事件

<button class='btn btn-theme' bindtap='setSaveImage'>保存圖片到本地</button>

<!-- 使用畫布站位-->
<canvas hidden="{{canvasHidden}}" canvas-id='imageCanvas'class='imageCanvas' 
style='width:{{canvasWidth}}px; height:{{canvasHeight}}px'  disable-scroll='true'>

</canvas>

2、 js文件綁定方法

/**
   * 保存圖片到本地
   */
  setSaveImage:function(e){
    var that = this;
    wx.showLoading({
      title: '圖片生成中...',
    })
    var res = '';
    //調用畫圖方法
    that.drawImages();
    
  },
  
  /**
   * 畫圖方法
   */
  drawImages:function(){
    let that = this;
    // console.log(that.data);
    that.canvasHidden = false;
    //輪播圖圖片
    // var banner_image = that.data.imgUrls[0];
    
    //網絡圖片地址無法用畫布截取到，故使用微信獲取圖片信息的接口，來設置網絡圖片地址
    that.getImageInfo(that.data.imgUrls[0]);
    
    //二維碼圖片
    var qrcode_image = that.data.imagePath;
    //標題
    var title = that.data.goodsInfo.title;

    let context = wx.createCanvasContext('imageCanvas', that);
    context.setFillStyle('#fff');
    //繪制矩形的寬高
    context.fillRect(0, 0, 375, 356);

    //繪制輪播圖
    context.drawImage(that.data.banner_image_url, 0, 0, 375,180);
    
    //繪制標題
    context.setFontSize(14);
    context.setFillStyle("#000")
    context.fillText(title, 26, 228)  //繪制描述

    //繪制二維碼圖 x y width height  
    context.drawImage(qrcode_image, 228, 200, 130, 130);
    // context.draw();
    context.draw(false,that.drawCallBack);

  },
  
    /**
   * 繪制畫布回調函數
   */
  drawCallBack:function(){
    var that = this
    wx.canvasToTempFilePath({
      // x:0,
      // y:0,
      // width: that.data.canvasWidth,
      // height: that.data.canvasHeight,
      canvasId: 'imageCanvas',
      fileType: 'jpg',
      success: function (res) {
        var shareImg = res.tempFilePath;
        // console.log(shareImg)
        wx.saveImageToPhotosAlbum({
          filePath: res.tempFilePath,
          success(res) {
            wx.hideLoading();
            wx.showToast({
              title: '保存成功',
              icon: 'success',
              duration: 2000
            });
          }
        })

      },
      fail: function (res) {
        cosole.log(res, '<-fail res')
      }
    })
  },
    
    /**
   * 設置畫布寬高
   */
  setCanvasSize:function(){
    var that = this;
    wx.getSystemInfo({
      success: function (res) {
        console.log(res);
        var myCanvasWidth = res.windowWidth;
        var myCanvasHeight = res.windowHeight;
        that.setData({
          canvasWidth: myCanvasWidth,
          canvasHeight: myCanvasHeight
        });
      },
    })
    
  },

  /**
   * 根據url獲取圖片信息
   */
  getImageInfo(ewmbgurl) {
    if (typeof ewmbgurl === 'string') {
      var that = this;
      wx.getImageInfo({   //  小程序獲取圖片信息API
        src: ewmbgurl,
        success: function (res) {
          that.setData({
            banner_image_url: res.path
          })
        },
        fail(err) {
          console.log(err)
        }
      })
    }
  },

3、畫布api的方法說明

/**
  * x        => x坐標
  * y        => y坐標
  * width    => 矩形寬
  * height   => 矩形高
*/
    context.fillRect(0, 0, 375, 356);

/**
* x        => x坐標
* y        => y坐標
*/
context.fillText(title, 26, 228)
    
/**
  * img_url  => 圖片地址
  * x        => x坐標
  * y        => y坐標
  * width    => 矩形寬
  * height   => 矩形高
*/
context.drawImage(qrcode_image, 228, 200, 130, 130);
    
/**
  * boolean              => 是否接着上次繪制
  * that.drawCallBack    => 回調函數
*/
context.draw(false,that.drawCallBack);

4、注意事項

1. 圖片地址如果是網絡地址，可能會出現在ide中可以正常截圖，但是在手機上變成空白，所以建議使用上面
    獲取圖片信息的方法
2. 畫布截圖的寬高以及位置可根據自己的需求進行修改
3. 由於獲取圖片信息方法是異步通知，所以畫布的后續操作可以放在success 里面操作

作者：蘿卜不吃土豆
鏈接：https://www.jianshu.com/p/657785af9c07
來源：簡書