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

news/2024/9/18 23:13:57/ 标签: uni-app, 微信小程序, notepad++

在这里插入图片描述

在这里插入图片描述

效果

在这里插入图片描述

源码

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

http://www.ppmy.cn/news/1510172.html

相关文章

《基层回忆录》第三章:新同事

异地在县城里的两天&#xff0c;白天外面热得要死&#xff0c;一觉睡到中午&#xff0c;点个外卖&#xff0c;直到晚上才出去&#xff0c;和dz一起找个摊子&#xff0c;或找个饭馆&#xff0c;品尝一下zg特色。周日下午&#xff0c;坐13&#xff1a;30的班车回到乡镇。 入户走访…

快速把文件名统计到excel表的方法

文件名统计到EXCEL表&#xff0c;这似乎很多人都没听说过&#xff0c;因为它与EXCEL表格不沾边&#xff0c;那么这个需求如何实现&#xff0c;用到什么方法&#xff0c;今天给大家介绍一个比较实用的方法&#xff0c;它可以把文件名或文件夹的名快速提取并统计到EXCEL表格上去。…

MySQL 查询分组内最新的第一条数据

目录 1、MySQL 5版本的写法 2、MySQL 8版本的写法 由于MySQL 5不支持窗口函数&#xff0c;因此不能使用PARTITION()、ROW_NUMBER() &#x1f330;&#xff1a;获取每个班级中最新注册的学号人员信息 也就是从 user_info 学生表中获取每个 class_id 班级的最新一条记录 1、…

软件运维实施维保方案(Doc完整版原件)

1.项目情况 2.服务简述 2.1服务内容 2.2服务方式 2.3服务要求 2.4服务流程 2.5工作流程 2.6业务关系 2.7培训 3.资源提供 3.1项目组成员 3.2服务保障 软件全套资料部分文档清单&#xff1a; 工作安排任务书&#xff0c;可行性分析报告&#xff0c;立项申请审批表&#xff0c;产…

Python进阶之3D图形

Python进阶之3D图形 在数据可视化中&#xff0c;2D图形通常可以满足大多数需求。然而&#xff0c;对于一些复杂的数据或分析&#xff0c;3D图形可以提供更多的视角和洞察。在Python中&#xff0c;使用 Matplotlib 和 Plotly 等库可以轻松创建各种3D图形。本文将介绍如何使用这…

【Redis】Redis 数据类型与结构—(二)

Redis 数据类型与结构 一、值的数据类型二、键值对数据结构三、集合数据操作效率 一、值的数据类型 Redis “快”取决于两方面&#xff0c;一方面&#xff0c;它是内存数据库&#xff0c;另一方面&#xff0c;则是高效的数据结构。 Redis 键值对中值的数据类型&#xff0c;也…

浏览器批量抓取网页数据保存为文件

安装 https://github.com/gildas-lormeau/SingleFile-MV3Download the zip file (https://github.com/gildas-lormeau/SingleFile-MV3/archive/master.zip) of the project and install it manually by unzipping it somewhere on your disk and following these instructions…

C++/Qt 网络(续二)

一、前言 这篇文章将接着上述内容继续向下陈述,前文提到网络编程这块内容将拆分为四个内容,分别是主机信息查询、TCP通信、UDP通信和基于HTTP的网络应用程序。前篇文章以及讲述了第一个内容——《主机信息查询》,接下来将继续讲述第三个内容——《TCP通信》。 对于前…

SL6605 高效率恒流限流白光LED驱动IC

SL6605是一种输入电压范围宽&#xff08;0.8~5.5V&#xff09;&#xff0c; 可调恒定电流和限定电流两种模式来驱动白光 LED 而设计的升压型 DC/DC 变换器。 采用变频模式&#xff0c; 逐周期限流&#xff0c;使输入输出电流随电源电压降低均匀变化。 该器件能利用单节或双节干…

Jdk17 jwt报错 java.lang.ClassNotFoundException: javax.xml.bind.DatatypeConverter

Jdk17 jwt报错 java.lang.ClassNotFoundException: javax.xml.bind.DatatypeConverter 版本 Spring Boot 3.3.2Jdk17原先Jwt0.9.1 解决办法 修改maven项目下的pom.xml文件 <!-- Jwt依赖--><dependency><groupId>io.jsonwebtoken</groupId><ar…

oracle ROLLBACK TO 的使用

Oracle中的ROLLBACK TO语句主要用于回滚当前事务到指定的保存点&#xff08;Savepoint&#xff09;&#xff0c;从而撤销从该保存点之后执行的所有数据库操作。这对于在复杂事务中需要撤销部分更改而不影响其他已完成的更改时非常有用。以下是关于ROLLBACK TO语句的详细使用说明…

使用 Python Scrapy 获取爬虫详细信息

使用 Python 的 Scrapy 框架获取爬虫详细信息是一个常见的任务。Scrapy 是一个功能强大的爬虫框架&#xff0c;适用于从网站提取数据。以下是一个简单的示例&#xff0c;展示如何使用 Scrapy 创建一个爬虫并获取爬取的数据。 1、问题背景 在使用 Python Scrapy 从网站提取数据…

漏洞挖掘 | 某系统webpack接口泄露引发的一系列漏洞

信息搜集 这里找到从小穿一条裤子长大的兄弟&#xff0c;要挟他交出来他的统一账号&#xff0c;否则把小时候的照片挂网上&#xff0c;开始某大学的资产搜集&#xff0c;直接hunter搜索此大学域名 看有价值的站点&#xff0c;ok找到下面的站点 未授权敏感信息泄露越权任意用…

Segment Routing MPLS介绍

定义 段路由SR&#xff08;Segment Routing&#xff09;是基于源路由理念而设计的在网络上转发数据包的一种协议。Segment Routing MPLS是指基于MPLS转发平面的Segment Routing&#xff0c;下文简称为Segment Routing。Segment Routing将网络路径分成一个个段&#xff0c;并且…

[Linux]车联网安全-大佬都在用的渗透测试系统

系统介绍 天刃是一个基于Ubuntu 18.04的车联网渗透测试发行版系统&#xff0c;主要用于针对车联网设备进行安全评估。系统内置上百个车联网安全测试专用工具&#xff0c;旨在解决车联网安全从业人员测试工具杂乱、测试环境配置复杂、无工具可用等一系列问题 系统优势 开箱即用…

CSS——字体背景(Font Background)

一、字体族 1、字体的相关样式&#xff1a; ① color 用来设置字体颜色&#xff08;前景颜色&#xff09; ② font-size 字体的大小 和font-size相关的单位&#xff1a; em 相对于当前元素的一个font-size rem 相对于根元素的一个font-size ③ font-family 字体族&#x…

深入理解Docker容器管理:优雅停止运行中的容器

在现代的软件开发和运维领域&#xff0c;Docker 容器技术已经成为一种主流的轻量级虚拟化解决方案。容器的生命周期管理是容器化技术中一个重要的组成部分&#xff0c;而停止一个正在运行的 Docker 容器是容器生命周期管理中的常见操作。本文将详细介绍如何优雅地停止一个正在运…

springboot、spring@JsonAlias(velue)的作用

‌JsonAlias注解用于为字段或参数指定反序列化时的别名。‌‌ 在Java开发中&#xff0c;‌特别是在使用Jackson库进行JSON序列化和反序列化时&#xff0c;‌JsonAlias注解扮演着重要的角色。‌它允许开发者为字段或参数指定一个或多个别名&#xff0c;‌这样在反序列化过程中&…

log4j日志配置%X{TransId}

log4j日志配置文件中的%X{TransId}是怎么动态获取值的 在Log4j中&#xff0c;%X{TransId} 是用来从MDC&#xff08;Mapped Diagnostic Context&#xff09;中获取值的占位符。MDC 是 Log4j 提供的一种机制&#xff0c;用于在同一个线程的不同日志记录中传递上下文信息。通过 M…

重启人生计划-我和我

&#x1f973;&#x1f973;&#x1f973; 茫茫人海千千万万&#xff0c;感谢这一刻你看到了我的文章&#xff0c;感谢观赏&#xff0c;大家好呀&#xff0c;我是最爱吃鱼罐头&#xff0c;大家可以叫鱼罐头呦~&#x1f973;&#x1f973;&#x1f973; 如果你觉得这个【重启人生…