小程序截图分享

如果加水印的话，我是用背景做了个水印截的图

html 复制代码

<content-interface>
    <canvas canvas-id="share" style="position: fixed;top: -1000px;height: 100vh; width: 100%;"></canvas>
    <view class="page-content">
        <view class="page-top draw_canvas">
            <image class="bg_water draw_canvas" src="/images/my/share.png" data-type="image" data-url="/images/my/share.png" />
            <view class="success-state draw_canvas" data-type="text" data-text="{{details.statusDesc || '--'}}">{{details.statusDesc || '--'}}</view>
        </view>
    </view>
 </content-interface>

js 复制代码

import { settlement_order_detail, } from './api';
import Wxml2Canvas from './wxml2canvas.js';
var _img = null;
var drawImage;
var drawImageData = {
  list: [{
      type: 'wxml',
      class: '.page-content .draw_canvas',
      limit: '.page-content',
      x: 0,
      y: 0
  }]
};
Page({
  data: {
    details: {},
    id: null,
    isTransfer: false,
  },
  onLoad(options) {
    drawImage = new Wxml2Canvas({
      element: 'share',  // canvas节点的id,
      obj: this,  // 在组件中使用时，需要传入当前组件的this
      width: 375,   // 宽高
      height: 375 * 3, 
      background: '#fff', // 默认背景色
      progress (percent) {  // 绘制进度
      },
      finish (url) {
        _img = url;
        console.log(_img, '---->>>><<<----------<<<<');
      },
      error (res) {
        console.log(res, '---->>>><<<<<<<');
      }
    });
    this.getDetail(options.id)
  },
  saveImg() {
    console.log(111111111111, '_________________>>>>>');
    drawImage.draw(drawImageData, this);
    setTimeout(() => {
      console.log(_img, '_________________>>>>>');
      wx.showShareImageMenu({
        path: _img,
        success: (res)=>{},
        fail: (err)=> {
          
        }
      })
    }, 300)
  },
  getDetail(id) {
    settlement_order_detail({id: id}).then(res => {
      this.setData({
        details: res.data,
        id: id,
      }, () => {
        drawImage.draw(drawImageData, this);
      })
    })
  },
})

css 复制代码

.page-top{
    color:#fff;
    text-align: center;
    position: relative;
    height: 300rpx;
}
.bg_water {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100vh;
    z-index: 1000;
}
.header {
    height: 80rpx;
}
.success-icon{
    width:120rpx;
    height:120rpx;
    z-index: 100;
    position: absolute;
    z-index: 1000;
    margin: 0 auto;
    left: 0;
    right: 0;
    top: 71rpx;
}
.item-value {
    max-width: 75%;
}
.share-icon {
    position: absolute;
    right: 20rpx;
    top: 20rpx;
    width: 40rpx;
    height: 40rpx;
    z-index: 3000;
}
.success-state{
    font-size: 40rpx;
    font-weight: bold;
    position: absolute;
    z-index: 1000;
    margin: 0 auto;
    left: 0;
    right: 0;
    top: 230rpx;
}

.success-price{
    font-size: 36rpx;
    margin-top: 20rpx;
    position: absolute;
    z-index: 1000;
    margin: 0 auto;
    left: 0;
    right: 0;
    top: 300rpx;
}

.page-info{
    padding: 0 4%;
    position: absolute;
    z-index: 2000;
    width: 92%;
    top: 400rpx;
}

.info-label{
    color: #222;
    font-size: 30rpx;
    font-weight: bold;
    display: flex;
    align-items: center;
    padding-top: 18rpx;
    padding-bottom: 30rpx;
}

.info-label:before{
    content: '';
    display: inline-block;
    width: 6rpx;
    height: 28rpx;
    background: linear-gradient( 135deg, #FF6634 0%, #FF7F57 100%);
    border-radius: 2rpx;
    margin-right: 12rpx;
}

.info-content > .item{
    display: flex;
    justify-content: space-between;
    padding-bottom: 30rpx;
    font-size: 28rpx;
}

.page-tips{
    padding: 30rpx 30rpx 0;
    color: #333;
    font-size: 24rpx;
}
.canvas-img {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
}