uniapp 微信小程序生成水印图片


效果

源码
<template><view style="overflow: hidden;"><camera device-position="back" flash="auto" class="camera"><cover-view class="text-white padding water-mark"><cover-view class="">{{ address }}</cover-view><cover-view class="margin-top-sm">{{ date }} {{ time }}</cover-view></cover-view><cover-view class="camera-btn" @click="takePhoto"></cover-view><cover-view class="flex justify-between align-center photos-bar" v-if="imgList.length > 0"><cover-view class="photos-swiper"><cover-view @click="ViewImage(index)" class="margin-right-xs imgBox" v-for="(item,index) in imgList":key="index"><cover-image class="imgItem" :src="item.src" mode="aspectFill"></cover-image><cover-view class="del-icon" @tap.stop="DelImg">❌</cover-view></cover-view></cover-view><cover-view @click="reportBtn" class="report-btn">上报({{ imgList.length }})</cover-view></cover-view></camera><canvas :style="{ width: w + 'px', height: h + 'px' }" canvas-id="canvas-photo"></canvas></view>
</template><script>/*** author 全易* time 2024-08-15 10:10:00* description 水印相机*/export default {data() {return {w: '',h: '',photoMax: 4,date: "⏱️2024-08-15",time: "10:10:00",address: '📍北京 · 石景山',imgList: []}},onReady() {},onShow() {// uni.getSystemInfo({// success: function(res) {// if (res.windowWidth > res.windowHeight) {// console.log("横屏");// } else {// console.log("竖屏");// }// }// })// uni.startAccelerometer({// interval: 'game',// success() {// console.log("启用加速针:", e);// uni.onAccelerometerChange(function(res) {// console.log("加速针数据:", res);// })// }// })// uni.startGyroscope({// success(e) {// console.log("启用陀螺仪:", e);// uni.onGyroscopeChange((res) => {// console.log("陀螺仪数据:", res);// });// }// })wx.startDeviceMotionListening({success: (e) => {console.log("监听设备方向:", e);wx.onDeviceMotionChange((res) => {console.log("设备方向:", res)const alpha = res.alpha;const beta = res.beta;const gamma = res.gamma;console.clear()if (Math.abs(beta) < 10 && Math.abs(gamma) < 10) {console.log("正竖屏");} else if (Math.abs(beta) > 170 && Math.abs(gamma) < 10) {console.log("倒竖屏");} else if (Math.abs(beta) < 10 && Math.abs(gamma - 90) < 10) {console.log("右横屏");} else if (Math.abs(beta) < 10 && Math.abs(gamma + 90) < 10) {console.log("左横屏");}});}})},watch: {},methods: {// 拍照takePhoto() {if (this.imgList.length === this.photoMax) {return uni.showToast({icon: "error",title: `最多可拍${this.photoMax}张`});}const that = this;const ccc = uni.createCameraContext();ccc.takePhoto({quality: 'high',success: (res) => {console.log("拍照:", res);that.createWatermark(res.tempImagePath);}});},// 生成水印createWatermark(image) {const that = this;uni.getImageInfo({src: image,success: res => {that.w = res.width / 3;that.h = res.height / 3.01;const ctx = uni.createCanvasContext('canvas-photo');//将图片src放到cancas内,宽高为图片大小ctx.drawImage(image, 0, 0, that.w, that.h);ctx.setFontSize(12);ctx.setFillStyle('#FFFFFF');// ctx.rotate(30 * Math.PI / 180);const textToWidth = that.w * 0.03;ctx.fillText('全易', textToWidth, that.h * 0.9);ctx.setFontSize(10);ctx.fillText(that.address, textToWidth, that.h * 0.98);ctx.fillText(`${that.date} ${that.time}`, textToWidth, that.h * 0.94);ctx.draw(false, () => {setTimeout(() => {uni.canvasToTempFilePath({canvasId: 'canvas-photo',success: ctf => {console.log(ctf.tempFilePath);this.imgList.push({src: ctf.tempFilePath})console.log(this.imgList);}});}, 1000);});}});},// 查看照片ViewImage(index) {uni.previewImage({current: index,urls: this.imgList.map(item => {return item.src})});},DelImg(e) {uni.showModal({title: '删除提醒',content: '确定要删除这张照片吗?',success: res => {if (res.confirm) {this.imgList.splice(e.currentTarget.dataset.index, 1)console.log(this.imgList)}}})},reportBtn() {this.imgList = [];uni.showToast({title: "处理成功"});},}}
</script><style scoped lang="scss">.camera {width: 100vw;height: 100vh;}.water-mark {}.camera-btn {width: 120rpx;height: 120rpx;line-height: 120rpx;border: 6rpx #FFFFFF solid;border-radius: 50%;padding: 8rpx;position: absolute;left: calc(50% - 60rpx);bottom: 210rpx;&::after {content: " ";display: block;width: 89%;height: 89%;position: absolute;top: 5%;left: 5%;border-radius: 50%;background-color: #FFFFFF;}}.photos-bar {width: 100%;height: 170rpx;box-sizing: border-box;padding: 20rpx 30rpx 40rpx;position: absolute;bottom: 0;left: 0;background-color: rgba(0, 0, 0, .8);.photos-swiper {width: 80%;overflow-x: auto;height: -webkit-fill-available;.imgBox {width: 110rpx;height: 110rpx;position: relative;display: inline-block;.del-icon {position: absolute;right: 0;top: 0;padding: 2px;background-color: rgba(0, 0, 0, 0.5);}.imgItem {width: 110rpx;height: 110rpx;}}}.report-btn {height: 68rpx;line-height: 68rpx;text-align: center;color: #FFFFFF;box-sizing: border-box;padding: 0rpx 20rpx;border-radius: 10rpx;background-color: #2157FF;}}#canvas-photo {position: fixed;top: -999999px;}
</style>
相关文章:
uniapp 微信小程序生成水印图片
效果 源码 <template><view style"overflow: hidden;"><camera device-position"back" flash"auto" class"camera"><cover-view class"text-white padding water-mark"><cover-view class"…...
ElasticSearch相关知识点
ElasticSearch中的倒排索引是如何工作的? 倒排索引是ElasticSearch中用于全文检索的一种数据结构,与正排索引不同的是,正排索引将文档按照词汇顺序组织。而倒排索引是将词汇映射到包含该词汇的文档中。 在ElasticSearch中,倒排索…...
css 文字图片居中及网格布局
以下内容纯自已个人理解,直接上代码: <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><…...
解决ImportError: DLL load failed while importing _rust: 找不到指定的程序
解决ImportError: DLL load failed while importing _rust: 找不到指定的程序 python使用库cryptography 当 from cryptography.hazmat.bindings._rust import exceptions as rust_exceptions 时,会报错: ImportError: DLL load failed while importin…...
集合-List去重
1.利用Set去重 @Test public void distinctList() {List<String> oldList = new ArrayList<>();oldList.add("a");oldList.add("a");oldList.add("b");oldList.add("c");oldList.add("d");List<String> …...
ST-LINK USB communication error 非常有效的解决方法
文章目录 一、检查确定是ST-LINK USB communication error的问题二、关闭文件,打开keil软件所在文件夹,找到STLink文件夹,找到该应用程序双击 一、检查确定是ST-LINK USB communication error的问题 二、关闭文件,打开keil软件所在…...
探索CSS的:future-link伪类:选择指向未来文档的链接
CSS(层叠样式表)是Web设计中用于描述网页元素样式的语言。随着CSS4的提案,引入了许多新的选择器,其中之一是:future-link伪类。然而,需要注意的是,:future-link伪类目前还处于提议阶段,并没有在…...
【C++】序列与关联容器(三)map与multimap容器
【C】序列与关联容器(三)map与multimap容器 一、map二、multiset / multimap 一、map 树中的每个结点的类型是一个std::pair //pair的类型是<const key,value> pair是一个包含两个指针的结构体,第一个指针指向该节点的key,…...
ActiveMQ、RabbitMQ、Kafka、RocketMQ在优先级队列、延迟队列、死信队列、重试队列、消费模式、广播模式的区别
ActiveMQ、RabbitMQ、Kafka、RocketMQ这四款消息队列在优先级队列、延迟队列、死信队列、重试队列、消费模式、广播模式等方面各有其特点和差异。以下是对这些方面的详细比较: 1. 优先级队列 ActiveMQ:支持优先级队列,可以在发送消息时指定…...
首款会员制区块链 Geist 介绍
今天,Pixelcraft Studios 很高兴地宣布即将推出 Geist,这是一个由 Base、Arbitrum、Alchemy 以及 Aavegotchi 支持的全新 L3。 Geist 之前的代号为 “Gotchichain”,是首个专为游戏打造的会员专用区块链。 为什么选择 Geist? …...
CANoe软件中Trace窗口的筛选栏标题不显示(空白)的解决方法
文章目录 问题描述原因分析解决方案扩展知识总结问题描述 不知道什么情况,CANoe软件中Trace窗口的筛选栏标题突然不显示了,一片空白。现象如下: 虽然不影响CANoe软件的使用,但是观感上非常难受,对于强迫症患者非常不友好。 原因分析 按照常规思路,尝试了: 1、重启CAN…...
日期类代码实现-C++
一、目标 通过前面对类和对象的介绍我们可以自己通过C代码初步实现一个简单的日期类。 实现的主要操作有: 1.日期类的构造函数 2.日期类的拷贝构造函数(在头文件中实现) 3.日期类的比较运算符重载 4.日期类的计算运算符重载 5.流插入运…...
【问题记录+总结】VS Code Tex Live 2024 Latex Workshop Springer模板----更新ing
目录 Summary 道阻且长 少即是多 兵马未动粮草先行 没有万能 和一劳永逸 具体问题具体分析 心态 Detail 1、关于模板[官网] 2、settings.json 3、虫和杀虫剂 4、擦 换成Tex Studio都好了。。。 Summary 道阻且长 某中意期刊,只有Latex。之前只简单用过…...
Linux运维_Bash脚本_源码安装Go-1.21.11
Linux运维_Bash脚本_源码安装Go-1.21.11 Bash (Bourne Again Shell) 是一个解释器,负责处理 Unix 系统命令行上的命令。它是由 Brian Fox 编写的免费软件,并于 1989 年发布的免费软件,作为 Sh (Bourne Shell) 的替代品。 您可以在 Linux 和…...
ShareSDK Twitter
创建应用 1.登录Twitter控制台并通过认证 2.点击Developer Portal进入Twitter后台 3.点击Sign up for Free Account创建应用 4.配置应用信息 以下为创建过程示例,图中信息仅为示例,创建时请按照真实信息填写,否则无法正常使用。 权限申请…...
word2vec 如何用多个词表示一个句子
word2vec 模型通常用于将单词映射为固定大小的向量。为了使用多个词表示一个句子,我们可以采用以下几种方法: 词袋模型 (Bag of Words, BoW): 将句子中所有词的向量加起来,不考虑词的顺序。这种方法简单,但会丢失词序信息。 计算…...
IDEA中查看接口的所有实现类和具体实现类
1.IDEA中接口的所有实现类查看 1.CTRLH(hierarchy 结构) 我们选中要查看的接口 按住快捷键ctrlh 在界面右侧可以看到该接口的所有可能实现类 2.右击diagrams->show diagram 选中要查看的接口 右击选择diagrams->show diagram 即可以以图表的方式查看接口和所有实现类…...
DLL的导出和调用
动态链接库在C中非常重要,写了一个简单的例子用于DLL的导出和调用。 DLL的生成 头文件 #include<iostream> #include<stdexcept> using namespace std;#define TESTAPI __declspec(dllexport)// 函数定义 extern "C" {TESTAPI int add(in…...
vscode中调试cuda kernel
关于vscode中调试cpp可参考之前的博客:ubuntu vscode 基本设置 和 调试设置_ubuntu vscode 调试-CSDN博客 这篇我们来讲如何调试.cu的kernel,主要参考的是:https://www.zhihu.com/question/431782036/answer/2468791220 1、基本准备不多说&am…...
SQL的连接查询与pandas的对应关系
在SQL和Pandas中,连接查询(join)是处理数据集之间关系的重要工具。下面是SQL中的各种连接查询类型及其与Pandas中相应操作的对应关系: 1. INNER JOIN SQL: INNER JOIN 返回两个表中具有匹配值的行。 Pandas: merge() 方法的 how…...
零门槛NAS搭建:WinNAS如何让普通电脑秒变私有云?
一、核心优势:专为Windows用户设计的极简NAS WinNAS由深圳耘想存储科技开发,是一款收费低廉但功能全面的Windows NAS工具,主打“无学习成本部署” 。与其他NAS软件相比,其优势在于: 无需硬件改造:将任意W…...
Vue记事本应用实现教程
文章目录 1. 项目介绍2. 开发环境准备3. 设计应用界面4. 创建Vue实例和数据模型5. 实现记事本功能5.1 添加新记事项5.2 删除记事项5.3 清空所有记事 6. 添加样式7. 功能扩展:显示创建时间8. 功能扩展:记事项搜索9. 完整代码10. Vue知识点解析10.1 数据绑…...
IGP(Interior Gateway Protocol,内部网关协议)
IGP(Interior Gateway Protocol,内部网关协议) 是一种用于在一个自治系统(AS)内部传递路由信息的路由协议,主要用于在一个组织或机构的内部网络中决定数据包的最佳路径。与用于自治系统之间通信的 EGP&…...
关于nvm与node.js
1 安装nvm 安装过程中手动修改 nvm的安装路径, 以及修改 通过nvm安装node后正在使用的node的存放目录【这句话可能难以理解,但接着往下看你就了然了】 2 修改nvm中settings.txt文件配置 nvm安装成功后,通常在该文件中会出现以下配置&…...
聊聊 Pulsar:Producer 源码解析
一、前言 Apache Pulsar 是一个企业级的开源分布式消息传递平台,以其高性能、可扩展性和存储计算分离架构在消息队列和流处理领域独树一帜。在 Pulsar 的核心架构中,Producer(生产者) 是连接客户端应用与消息队列的第一步。生产者…...
浅谈不同二分算法的查找情况
二分算法原理比较简单,但是实际的算法模板却有很多,这一切都源于二分查找问题中的复杂情况和二分算法的边界处理,以下是博主对一些二分算法查找的情况分析。 需要说明的是,以下二分算法都是基于有序序列为升序有序的情况…...
如何在最短时间内提升打ctf(web)的水平?
刚刚刷完2遍 bugku 的 web 题,前来答题。 每个人对刷题理解是不同,有的人是看了writeup就等于刷了,有的人是收藏了writeup就等于刷了,有的人是跟着writeup做了一遍就等于刷了,还有的人是独立思考做了一遍就等于刷了。…...
均衡后的SNRSINR
本文主要摘自参考文献中的前两篇,相关文献中经常会出现MIMO检测后的SINR不过一直没有找到相关数学推到过程,其中文献[1]中给出了相关原理在此仅做记录。 1. 系统模型 复信道模型 n t n_t nt 根发送天线, n r n_r nr 根接收天线的 MIMO 系…...
Java + Spring Boot + Mybatis 实现批量插入
在 Java 中使用 Spring Boot 和 MyBatis 实现批量插入可以通过以下步骤完成。这里提供两种常用方法:使用 MyBatis 的 <foreach> 标签和批处理模式(ExecutorType.BATCH)。 方法一:使用 XML 的 <foreach> 标签ÿ…...
【JVM面试篇】高频八股汇总——类加载和类加载器
目录 1. 讲一下类加载过程? 2. Java创建对象的过程? 3. 对象的生命周期? 4. 类加载器有哪些? 5. 双亲委派模型的作用(好处)? 6. 讲一下类的加载和双亲委派原则? 7. 双亲委派模…...
