原生微信小程序wxml2canvas生成海报并包保存至本地

Wxml2Canvas是什么？
Wxml2Canvas 是一个用于微信小程序开发的工具库，主要用途是将小程序页面的内容绘制成图片，以便生成海报或保存分享图片到相册等功能。具体用途包括：

①海报生成功能：允许开发者将当前页面的特定部分或整个页面内容绘制到 Canvas 上，并导出为图片，用于生成自定义的海报。

②分享图片生成：可以将页面内容（如用户生成的图表、统计数据等）转换为图片形式，方便用户保存或分享到社交平台。

③动态数据展示：支持将动态生成的数据内容实时绘制到 Canvas 上，使得用户可以查看并导出实时更新的信息。

④自定义绘制：可以根据项目需求自定义绘制逻辑，包括绘制图形、文本、图片等元素，以满足复杂的界面设计和展示要求。

⑤用户交互的延展：通过将用户交互的内容绘制到图片上，可以实现一些特殊的需求，如生成用户定制的表单、报告等。

总之，Wxml2Canvas 提供了一种在微信小程序中动态生成图片的有效方法，极大地增强了小程序开发的可视化和用户互动性。

1.效果

2.下载依赖

npm install wxml2canvas --save

3.微信开发者 工具==》构建npm

4.需要生成海报得页面引入Wxml2Canvas (根据自己得路径来)

import Wxml2Canvas from '../../miniprogram_npm/wxml2canvas/index'

5.完整代码 index.wxml

<view style="position: relative;height: 100%;overflow: hidden;width: 100%;">
<view style="position: relative;z-index: 999;" catchlongpress="savePoster">
  <canvas canvas-id="canvas2" class="share__canvas"></canvas>
</view>
    <view style="position: absolute;left: 0;top: 0;opacity: 0;"  >
    <view id="share__canvas2" data-index="2" class="share__canvas share__canvas2">
        <image data-index="2"  class="share__canvas2-image draw_canvas" data-type="image" data-url="{{hb_bg}}" src="{{hb_bg}}" ></image>
        <image data-index="2" class="share__canvas2-image-2 draw_canvas" data-type="image" data-url="{{hb_wx2code}}" src="{{hb_wx2code}}" mode="widthFix" data-mode="scaleToFill"></image>
        <image data-index="2" class="share__canvas2-image-3 draw_canvas" data-type="image" data-url="" src="" mode="widthFix" data-mode="scaleToFill"></image>
    </view>
  </view>
  </view>

6.index.js

import Wxml2Canvas from '../../miniprogram_npm/wxml2canvas/index'

Page({
  data: {
    imgUrl:"",      // 存储海报图片路径
    width:"",       // canvas宽度
    height:"",      // canvas高度
    hb_wx2code: "https://img1.baidu.com/it/u=221788990,2355506378&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",  
    hb_bg: "https://img1.baidu.com/it/u=3918992979,2476051043&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",  
  },

  /**
   * 生命周期函数--监听页面加载
   * 页面加载时触发，延迟500ms后调用drawMyCanvas()绘制canvas
   */
  onLoad(options) {
    setTimeout(() => {
      this.drawMyCanvas();
    }, 500);
  },

  /**
   * 绘制canvas
   * 使用wx.createSelectorQuery()获取选择器查询对象，获取指定范围内的宽度和高度，并设置到data中，
   * 然后在延迟1.5秒后调用startDraw()开始绘制canvas
   */
  drawMyCanvas() {
    wx.showLoading({
      mask: true
    });
    const that = this;
    const query = wx.createSelectorQuery().in(this);
    query.select('#share__canvas2').fields({
      size: true,
      scrollOffset: true
    }, data => {
      console.log("获取宽度", data);
      let width = data.width;
      let height = data.height;
      that.setData({
        width,
        height
      });
      setTimeout(() => {
        that.startDraw();
      }, 1500);
    }).exec();
  },

  /**
   * 开始绘制canvas
   * 创建Wxml2Canvas对象，设置canvas的id、宽度、高度、背景色等参数，
   * 调用draw()方法开始绘制canvas内容，并在绘制完成后隐藏加载框，更新海报图片路径到data中
   */
  startDraw() {
    let that = this;
    // 创建wxml2canvas对象
    let drawMyImage = new Wxml2Canvas({
      element: 'canvas2', // canvas的id
      width: that.data.width * 2, // canvas宽度（实际像素倍增）
      height: that.data.height * 2, // canvas高度（实际像素倍增）
      obj: that,
      background: '#141415',// 背景色
      progress(percent) {
        console.log(percent);// 绘制进度回调（未使用）
      },
      finish(url) {
        console.log("完成", url);  // 绘制完成回调，输出绘制完成的图片路径
        wx.hideLoading();// 隐藏加载框
        that.setData({
          imgUrl: url // 将绘制完成的图片路径更新到data中
        });
      },
      error(res) {
        console.log(res); // 绘制出错回调（未使用）
        wx.hideLoading(); // 隐藏加载框
      }
    });
  
    let data = {
      list: [{
        type: 'wxml',
        class: '.share__canvas2 .draw_canvas',
        limit: '.share__canvas2',
        x: 0,
        y: 0
      }]
    };
    drawMyImage.draw(data, this); // 调用Wxml2Canvas的draw方法开始绘制
  },

  /**
   * 保存海报到相册
   * 调用wx.saveImageToPhotosAlbum()保存海报图片到相册，若保存失败则进行授权提示
   */
  savePoster() {
    const that = this;
    wx.saveImageToPhotosAlbum({
      filePath: that.data.imgUrl, // 海报图片路径
      success: function () {
        wx.showToast({
          title: '保存成功',
          icon: 'none',
          duration: 1500
        });
      },
      fail(err) {
        if (err.errMsg === "saveImageToPhotosAlbum:fail:auth denied" || err.errMsg === "saveImageToPhotosAlbum:fail auth deny" || err.errMsg === "saveImageToPhotosAlbum:fail authorize no response") {
          wx.showModal({
            title: '提示',
            content: '需要您授权保存相册',
            showCancel: false,
            success: modalSuccess => {
              wx.openSetting({
                success(settingdata) {
                  if (settingdata.authSetting['scope.writePhotosAlbum']) {
                    wx.saveImageToPhotosAlbum({
                      filePath: that.data.imgUrl,
                      success: function () {
                        wx.showToast({
                          title: '保存成功',
                          icon: 'success',
                          duration: 2000
                        });
                      },
                    });
                  } else {
                    wx.showToast({
                      title: '授权失败，请稍后重新获取',
                      icon: 'none',
                      duration: 1500
                    });
                  }
                }
              });
            }
          });
        }
      }
    });
  },

})

7.样式代码

.share__canvas {
    width: 100vw;
    height: 100vh;
    font-size: 32rpx;
}

.share__canvas2 {
    position: relative;
}
.share__canvas2-image {
  width: 100%;
  height: 100%;
}
.share__canvas2-image-2 {
    width: 200rpx;
    position: absolute;
    left: 100rpx;
    bottom: 80rpx;
}
.share__canvas2-image-3 {
  width: 350rpx;
  position: absolute;
  left: 190rpx;
  bottom: 350rpx;
}

8.注意：外层容器 .share__canvas一定要写宽高，否则里面元素使用百分比，页面生成出来的是空白