小程序截图分享

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

<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;
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/857396.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Ubuntu配置ssh+vnc(完整版)

Ubuntu配置sshvnc&#xff08;完整版&#xff09; 1 配置ssh 1. 安装openssh-server&#xff0c;配置开机自启 # 更新包 sudo apt-get update # 安装openssh-server sudo apt-get install -y openssh-server # 启动服务 sudo service ssh start # 配置开机自启 sudo systemc…

C++类和对象总结

目录 总结 一、引言 二、类的定义 三、对象的创建与初始化 四、访问控制 五、封装 六、继承 七、多态 八、其他特性 九、总结 C类的定义 C对象的创建和初始化 C类的访问控制 总结 一、引言 C是一种面向对象的编程语言&#xff0c;其核心概念是类和对象。类是对现…

细说MCU定时器模块的输入捕捉功能的实现方法

目录 一、工程背景 二、建立工程 1、配置GPIO 2、选择时钟源和Debug 3、 配置定时器TIM1 4、 配置定时器TIM13 5、配置串口 6、配置中断 7、配置系统时钟 三、代码修改 1、使能TIM1输入捕捉功能和TIM3的PWM输出功能 2、自定义变量 3、重定义回调函数 4、输出到…

【国际化I18n使用方法】vue2使用i18简单实现多语种切换,刷新保持,动态数据处理

效果图 使用流程 总结就是&#xff0c;安装好插件后&#xff0c;配置几个语言的js文件&#xff0c;每个词都要在每个js内写一遍对应的语言&#xff0c;然后通过切换js文件拿到对应的语言&#xff0c;实现翻译的效果。然后当前使用什么语言保存到本地&#xff0c;这样刷新就可以…

【进阶篇-Day4:使用JAVA编写石头迷阵游戏】

目录 1、绘制界面2、打乱石头方块3、移动业务4、游戏判定胜利5、统计步数6、重新游戏7、完整代码&#xff1a; 1、绘制界面 上述思路是&#xff1a;使用一个二维数组存放图片的编号&#xff0c;然后在后持遍历即可获取对应的图片。 代码如下&#xff1a; package com.itheima.s…

【设计模式之模板方法模式 -- C++】

模板方法模式 – 抽象父类&#xff0c;子类实现 模板方法设计模式是一种行为设计模式&#xff0c;它在父类中定义了一个操作的算法的骨架&#xff0c;而将一些步骤延迟到子类中实现。这样&#xff0c;可以在不改变算法结构的前提下&#xff0c;重新定义算法的某些特定步骤。模…

vue3父组件获取子组件实例(2024-06-22)

vue3获取子组件实例 在Vue 3中&#xff0c;可以使用ref来获取子组件的实例。首先&#xff0c;在父组件中需要引入ref&#xff0c;然后在模板中通过ref属性为子组件设置一个引用名称。之后&#xff0c;可以在父组件的setup函数中使用refAPI来访问子组件实例。 以下是一个简单的…

取代煤气灶,新能源电燃灶真有那么牛吗

在当今社会&#xff0c;能源问题日益凸显&#xff0c;能源危机的警钟不断敲响。与此同时&#xff0c;人们对于生活品质和安全环保的要求也越来越高。在这样的背景下&#xff0c;一种号称能取代燃气灶和电磁炉的新能源电燃灶——华火电燃灶进入了人们的视野。 华火电燃灶的出现似…

【区分vue2和vue3下的element UI Empty 空状态组件,分别详细介绍属性,事件,方法如何使用,并举例】

在 Element UI&#xff08;为 Vue 2 设计&#xff09;和 Element Plus&#xff08;为 Vue 3 设计&#xff09;中&#xff0c;Empty&#xff08;空状态&#xff09;组件通常用于在数据为空或没有内容时向用户展示一种占位提示。然而&#xff0c;需要注意的是&#xff0c;Element…

SpringBoot整合justauth实现多种方式的第三方登陆

目录 0.准备工作 1.引入依赖 2.yml文件 3. Controller代码 4.效果 参考 0.准备工作 你需要获取三方登陆的client-id和client-secret 以github为例 申请地址&#xff1a;Sign in to GitHub GitHub 1.引入依赖 <?xml version"1.0" encoding"UTF-8&quo…

Gflags的使用

目录 1. gflags 安装 2. gflags 使用 2.1 基本使用方法 2.2 基本使用实例 2.3 放入配置文件中 3. 融入cmakelists中使用 在实际工程代码开发中&#xff0c;发现gflags很好用&#xff0c;可以在运行 1. gflags 安装 gflags的安装使用apt-get install命令安装即可 sudo …

【SCAU数据挖掘】数据挖掘期末总复习题库简答题及解析——下

1.从某超市顾客中随机抽取5名&#xff0c;他们的购物篮数据的二元0/1表示如下&#xff1a; 顾客号 面包 牛奶 尿布 啤酒 鸡蛋 可乐 1 1 1 0 0 0 0 2 1 0 1 1 1 0 3 0 1 1 1 0 1 4 1 1 1 1 0 0 5 1 1 1 0 0 1 某学生依据这些数据做…

Spring Security6 设置免登录接口地址

1. 在SecurityFilterChain中设置免登录接口地址。如果定义了多个SecurityFilterChain&#xff0c;并且前面的SecurityFilterChain里使用了anyRequest().authenticated()&#xff0c;后面的免登录可能会失效。 Configuration EnableWebSecurity public class SecurityConfig {B…

Linux常用命令(16)—awk命令(有相关截图)

写在前面&#xff1a; 最近在学习Linux命令&#xff0c;记录一下学习Linux常用命令的过程&#xff0c;方便以后复习。仅供参考&#xff0c;若有不当的地方&#xff0c;恳请指正。如果对你有帮助&#xff0c;欢迎点赞&#xff0c;关注&#xff0c;收藏&#xff0c;评论&#xf…

tessy 编译错误总结

目录 1,tessy 单元测试 TDE 界面 数据无法填充:the test object interface is incomplete 2,tessy 编译报错:单元测试时,普通桩函数内容相关异常场景 3,tessy 编译报错:模块分析后 头文件 找不到 4,tessy 集成测试:SCE界面component函数太多 5,tessy 编译报错:函…

Java 10新特性介绍

Java 10是Java平台的一个重要更新&#xff0c;它引入了多项新特性和改进。以下是一些主要的新特性&#xff1a; 局部变量类型推断&#xff08;var关键字&#xff09; Java 10允许使用var关键字来声明局部变量&#xff0c;而无需显式指定变量的类型。编译器会根据变量赋值的上下…

non_blocking=True 与 torch.cuda.synchronize()

需要注意的是&#xff1a;GPU和CPU之间是异步执行的&#xff0c;CPU向GPU下达指令以后会立刻执行之后的代码&#xff0c;CPU不会等待GPU执行完成 一、non_blockingTrue 目的&#xff1a;压缩gpu的效果&#xff0c;避免CPU与GPU设备数据传输时间开销带来的计算效率低下 在 P…

Android获取控件宽高的几种方式

第一种方式&#xff1a;在需要时获取&#xff0c;如控件点击时再获取 button.setOnClickListener(new View.OnClickListener() { Override public void onClick(View v) { getTextWidthAndHeight(); } }); 第二种方式&#xff1a;重写onWindowFocusChanged()方法 Overr…

【SQL】varchar 与 char 的区别

在 SQL 中&#xff0c;VARCHAR 和 CHAR 是用于存储字符串类型数据的两种数据类型&#xff0c;但它们在存储方式和性能上有显著的区别。 CHAR 定义: CHAR 是一种固定长度的字符串数据类型。长度: 你需要在定义表结构时指定长度&#xff0c;例如 CHAR(10)。存储方式: 无论实际存…

【机器学习】机器学习赋能交通出行:智能化实践与创新应用探索

&#x1f4dd;个人主页&#x1f339;&#xff1a;Eternity._ &#x1f339;&#x1f339;期待您的关注 &#x1f339;&#x1f339; ❀目录 &#x1f4d2;1. 引言&#x1f4d9;2. 交通流量预测与优化&#x1f31e;数据准备&#x1f319;模型训练与预测⭐评估模型与优化 &#x…