小程序截图分享

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

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;
}
相关推荐
新元代码9 分钟前
Node.js 完全安装与使用指南:Windows 平台详细教程
windows·node.js
私人珍藏库14 分钟前
[Windows] 随手剪-视频合并工具 v0.12多种格式多段视频50多种转场效果
windows·音视频
用户31187945592182 小时前
copyparty.exe 怎么用?局域网文件共享工具安装与运行教程
windows
游戏开发爱好者83 小时前
iOS 26 崩溃日志深度解读,获取方式、系统变动、定位策略
android·macos·ios·小程序·uni-app·cocoa·iphone
郑州光合科技余经理5 小时前
微服务架构:基于Spring Cloud ,构建同城生活服务平台
java·spring cloud·微服务·小程序·架构·uni-app
2501_916008896 小时前
JavaScript调试工具有哪些?常见问题与常用调试工具推荐
android·开发语言·javascript·小程序·uni-app·ecmascript·iphone
流***陌6 小时前
智慧寄件新体验:快递小程序如何简化日常生活
小程序
【上下求索】7 小时前
学习笔记092——Windows如何将 jar 包启动设置成系统服务
java·windows·笔记·学习·jar
一直在学习的小白~8 小时前
小程序开发:开启定制化custom-tab-bar但不生效问题,以及使用NutUI-React Taro的安装和使用
webpack·小程序·webapp
Liu1bo8 小时前
【Windows】如何管理电脑磁盘文件,保持简洁
windows