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

Posted 2022-04-20 yangchin9

1、 wxml 页面

使用画布来站位，并给按钮添加绑定事件

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

<!-- 使用画布站位-->
<canvas hidden="canvasHidden" canvas-id=‘imageCanvas‘class=‘imageCanvas‘ 
style=‘width:canvasWidthpx; height:canvasHeightpx‘  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
来源：简书