当前位置: 首页 > news >正文

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中的倒排索引是如何工作的&#xff1f; 倒排索引是ElasticSearch中用于全文检索的一种数据结构&#xff0c;与正排索引不同的是&#xff0c;正排索引将文档按照词汇顺序组织。而倒排索引是将词汇映射到包含该词汇的文档中。 在ElasticSearch中&#xff0c;倒排索…...

css 文字图片居中及网格布局

以下内容纯自已个人理解&#xff0c;直接上代码&#xff1a; <!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 时&#xff0c;会报错&#xff1a; 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的问题二、关闭文件&#xff0c;打开keil软件所在文件夹&#xff0c;找到STLink文件夹&#xff0c;找到该应用程序双击 一、检查确定是ST-LINK USB communication error的问题 二、关闭文件&#xff0c;打开keil软件所在…...

探索CSS的:future-link伪类:选择指向未来文档的链接

CSS&#xff08;层叠样式表&#xff09;是Web设计中用于描述网页元素样式的语言。随着CSS4的提案&#xff0c;引入了许多新的选择器&#xff0c;其中之一是:future-link伪类。然而&#xff0c;需要注意的是&#xff0c;:future-link伪类目前还处于提议阶段&#xff0c;并没有在…...

【C++】序列与关联容器(三)map与multimap容器

【C】序列与关联容器&#xff08;三&#xff09;map与multimap容器 一、map二、multiset / multimap 一、map 树中的每个结点的类型是一个std::pair //pair的类型是<const key,value> pair是一个包含两个指针的结构体&#xff0c;第一个指针指向该节点的key&#xff0c;…...

ActiveMQ、RabbitMQ、Kafka、RocketMQ在优先级队列、延迟队列、死信队列、重试队列、消费模式、广播模式的区别

ActiveMQ、RabbitMQ、Kafka、RocketMQ这四款消息队列在优先级队列、延迟队列、死信队列、重试队列、消费模式、广播模式等方面各有其特点和差异。以下是对这些方面的详细比较&#xff1a; 1. 优先级队列 ActiveMQ&#xff1a;支持优先级队列&#xff0c;可以在发送消息时指定…...

首款会员制区块链 Geist 介绍

今天&#xff0c;Pixelcraft Studios 很高兴地宣布即将推出 Geist&#xff0c;这是一个由 Base、Arbitrum、Alchemy 以及 Aavegotchi 支持的全新 L3。 Geist 之前的代号为 “Gotchichain”&#xff0c;是首个专为游戏打造的会员专用区块链。 为什么选择 Geist&#xff1f; …...

CANoe软件中Trace窗口的筛选栏标题不显示(空白)的解决方法

文章目录 问题描述原因分析解决方案扩展知识总结问题描述 不知道什么情况,CANoe软件中Trace窗口的筛选栏标题突然不显示了,一片空白。现象如下: 虽然不影响CANoe软件的使用,但是观感上非常难受,对于强迫症患者非常不友好。 原因分析 按照常规思路,尝试了: 1、重启CAN…...

日期类代码实现-C++

一、目标 通过前面对类和对象的介绍我们可以自己通过C代码初步实现一个简单的日期类。 实现的主要操作有&#xff1a; 1.日期类的构造函数 2.日期类的拷贝构造函数&#xff08;在头文件中实现&#xff09; 3.日期类的比较运算符重载 4.日期类的计算运算符重载 5.流插入运…...

【问题记录+总结】VS Code Tex Live 2024 Latex Workshop Springer模板----更新ing

目录 Summary 道阻且长 少即是多 兵马未动粮草先行 没有万能 和一劳永逸 具体问题具体分析 心态 Detail 1、关于模板[官网] 2、settings.json 3、虫和杀虫剂 4、擦 换成Tex Studio都好了。。。 Summary 道阻且长 某中意期刊&#xff0c;只有Latex。之前只简单用过…...

Linux运维_Bash脚本_源码安装Go-1.21.11

Linux运维_Bash脚本_源码安装Go-1.21.11 Bash (Bourne Again Shell) 是一个解释器&#xff0c;负责处理 Unix 系统命令行上的命令。它是由 Brian Fox 编写的免费软件&#xff0c;并于 1989 年发布的免费软件&#xff0c;作为 Sh (Bourne Shell) 的替代品。 您可以在 Linux 和…...

ShareSDK Twitter

创建应用 1.登录Twitter控制台并通过认证 2.点击Developer Portal进入Twitter后台 3.点击Sign up for Free Account创建应用 4.配置应用信息 以下为创建过程示例&#xff0c;图中信息仅为示例&#xff0c;创建时请按照真实信息填写&#xff0c;否则无法正常使用。 权限申请…...

word2vec 如何用多个词表示一个句子

word2vec 模型通常用于将单词映射为固定大小的向量。为了使用多个词表示一个句子&#xff0c;我们可以采用以下几种方法&#xff1a; 词袋模型 (Bag of Words, BoW): 将句子中所有词的向量加起来&#xff0c;不考虑词的顺序。这种方法简单&#xff0c;但会丢失词序信息。 计算…...

IDEA中查看接口的所有实现类和具体实现类

1.IDEA中接口的所有实现类查看 1.CTRLH(hierarchy 结构) 我们选中要查看的接口 按住快捷键ctrlh 在界面右侧可以看到该接口的所有可能实现类 2.右击diagrams->show diagram 选中要查看的接口 右击选择diagrams->show diagram 即可以以图表的方式查看接口和所有实现类…...

DLL的导出和调用

动态链接库在C中非常重要&#xff0c;写了一个简单的例子用于DLL的导出和调用。 DLL的生成 头文件 #include<iostream> #include<stdexcept> using namespace std;#define TESTAPI __declspec(dllexport)// 函数定义 extern "C" {TESTAPI int add(in…...

vscode中调试cuda kernel

关于vscode中调试cpp可参考之前的博客&#xff1a;ubuntu vscode 基本设置 和 调试设置_ubuntu vscode 调试-CSDN博客 这篇我们来讲如何调试.cu的kernel&#xff0c;主要参考的是&#xff1a;https://www.zhihu.com/question/431782036/answer/2468791220 1、基本准备不多说&am…...

SQL的连接查询与pandas的对应关系

在SQL和Pandas中&#xff0c;连接查询&#xff08;join&#xff09;是处理数据集之间关系的重要工具。下面是SQL中的各种连接查询类型及其与Pandas中相应操作的对应关系&#xff1a; 1. INNER JOIN SQL: INNER JOIN 返回两个表中具有匹配值的行。 Pandas: merge() 方法的 how…...

OpenClaw办公自动化:GLM-4.7-Flash处理Excel与PDF文档

OpenClaw办公自动化&#xff1a;GLM-4.7-Flash处理Excel与PDF文档 1. 为什么需要AI处理办公文档&#xff1f; 上周五下午5点&#xff0c;我正对着电脑屏幕发愁——市场部发来的20份PDF调研报告需要提取关键数据&#xff0c;财务部的季度Excel报表等着合并分析&#xff0c;而我…...

LangGPT结构化提示词框架:重新定义AI交互的核心方法

LangGPT结构化提示词框架&#xff1a;重新定义AI交互的核心方法 【免费下载链接】LangGPT LangGPT: Empowering everyone to become a prompt expert!&#x1f680; Structured Prompt&#xff0c;Language of GPT, 结构化提示词&#xff0c;结构化Prompt 项目地址: https://…...

突破运营商限制:中兴光猫配置文件解密工具完全指南

突破运营商限制&#xff1a;中兴光猫配置文件解密工具完全指南 【免费下载链接】ZET-Optical-Network-Terminal-Decoder 项目地址: https://gitcode.com/gh_mirrors/ze/ZET-Optical-Network-Terminal-Decoder 一、用户痛点解析&#xff1a;你是否正遭遇这些网络管理困境…...

计算机毕业设计springboot众筹系统 基于SpringBoot的校园项目众筹融资平台设计与实现 高校创新创业众筹服务与资金管理系统构建研究

计算机毕业设计springboot众筹系统&#xff08;配套有源码 程序 mysql数据库 论文&#xff09; 本套源码可以在文本联xi,先看具体系统功能演示视频领取&#xff0c;可分享源码参考。 随着我国经济的高速发展与人们生活水平的日益提高&#xff0c;人们对生活质量的追求也多种多样…...

ReaR实战:构建企业级Linux裸机灾难恢复体系

1. 为什么企业需要裸机灾难恢复方案 想象一下这样的场景&#xff1a;凌晨三点&#xff0c;机房突然响起刺耳的警报声。值班工程师冲进机房&#xff0c;发现核心数据库服务器已经宕机&#xff0c;硬盘指示灯全灭——这是一次严重的硬件故障。更糟糕的是&#xff0c;这台服务器上…...

jcifs-ng:Java SMB客户端库如何简化企业文件共享?

jcifs-ng&#xff1a;Java SMB客户端库如何简化企业文件共享&#xff1f; 【免费下载链接】jcifs-ng A cleaned-up and improved version of the jCIFS library 项目地址: https://gitcode.com/gh_mirrors/jc/jcifs-ng jcifs-ng是一个经过清理和改进的jCIFS库版本&#…...

基于spring和vue的企业原材料库存盘点食品厂管理系统

目录技术选型与架构设计核心功能模块划分数据库设计要点关键技术实现前端交互优化系统安全措施测试与部署方案扩展性设计项目技术支持源码获取详细视频演示 &#xff1a;文章底部获取博主联系方式&#xff01;同行可合作技术选型与架构设计 后端采用Spring Boot框架&#xff0…...

用了Trae写业务系统,为什么上线前总要手动补依赖和权限?

发版前夜&#xff0c;测试跑穿才发现前端字段跟后端对不上&#xff0c;改到凌晨三点才勉强收口。这种场景在引入 AI Coding 后并不罕见&#xff0c;不少团队用了 Trae 写业务系统&#xff0c;速度是上去了&#xff0c;可上线前总得花半天专门查安全漏洞和依赖冲突。大家原指望 …...

论文AIGC检测率多少算正常?超标后怎么高效降AI率达标?

论文AIGC检测率多少算正常&#xff1f;超标后怎么高效降AI率达标&#xff1f; “我的论文AIGC率31%&#xff0c;这算高吗&#xff1f;”“学校要求低于多少&#xff1f;”“超标了怎么办&#xff1f;”——最近这类问题在各大毕业论文群里出现的频率越来越高。说实话我去年也是…...

空洞骑士模组管理终极指南:Scarab如何让复杂模组安装变得简单快速

空洞骑士模组管理终极指南&#xff1a;Scarab如何让复杂模组安装变得简单快速 【免费下载链接】Scarab An installer for Hollow Knight mods written in Avalonia. 项目地址: https://gitcode.com/gh_mirrors/sc/Scarab 对于《空洞骑士》玩家来说&#xff0c;模组&…...