如果加水印的话,我是用背景做了个水印截的图
<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>
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, // 在组件中使用时,需要传入当前组件的thiswidth: 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);})})},
})
.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;
}