小程序截图分享

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

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;
}
相关推荐
TeleostNaCl9 小时前
一种使用 PowerToys 的键盘管理器工具编辑惠普暗影精灵11 的 OMEN 自定义按键的方法
windows·经验分享·计算机外设·1024程序员节
知识分享小能手10 小时前
uni-app 入门学习教程,从入门到精通,uni-app 企业项目实战:鲁嗑瓜子项目开发知识点(9)
前端·javascript·学习·微信小程序·小程序·uni-app·vue
知识分享小能手10 小时前
uni-app 入门学习教程,从入门到精通,uni-app中uCharts组件学习((8)
vue.js·学习·ui·微信小程序·小程序·uni-app·echarts
社会底层无业大学生13 小时前
uniapp微信小程序简单表格展示
微信小程序·小程序·uni-app·vue·1024程序员节
從南走到北13 小时前
JAVA无人自助共享系统台球室源码自助开台约球交友系统源码小程序
java·微信·微信小程序·小程序·1024程序员节
Magnum Lehar15 小时前
网络安全端口安全映射工具编写代码1
windows·1024程序员节
2501_9159184117 小时前
iOS 26 查看电池容量与健康状态 多工具组合的工程实践
android·ios·小程序·https·uni-app·iphone·webview
JuicyActiveGilbert17 小时前
【Python进阶】第2篇:单元测试
开发语言·windows·python·单元测试
2501_9159090618 小时前
iOS 架构设计全解析 从MVC到MVVM与使用 开心上架 跨平台发布 免Mac
android·ios·小程序·https·uni-app·iphone·webview
YuanlongWang18 小时前
C# 设计模式——观察者
windows·设计模式·c#