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>

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

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

相关文章

【笔记】泰山派环境配置遇到E: Unable to locate package repo

答案来自通义千问&#xff0c;解决了我的问题&#xff0c;做一些记录 你尝试在Ubuntu或Debian系统上使用apt命令安装repo工具&#xff0c;但是遇到了问题&#xff0c;因为repo不是直接在软件源中作为一个独立的包提供的。repo是Google的一个Git仓库管理工具&#xff0c;通常用…

EasyCVR视频汇聚平台:打造全栈视频监控系统的基石,解锁可视化管理与高效运维

随着科技的飞速发展&#xff0c;视频监控已成为现代社会不可或缺的一部分&#xff0c;广泛应用于社区、公共场所、工业领域等多个场景。EasyCVR视频汇聚平台&#xff0c;作为一款高性能的视频汇聚管理平台&#xff0c;凭借其强大的视频处理、汇聚与融合能力&#xff0c;在构建全…

数据结构——关于栈

1.栈 1.1栈的概念及结构 栈&#xff1a;一种特殊的线性表&#xff0c;其只允许在固定的一端进行插入和删除元素操作 进行数据插入和删除操作的一端称为栈顶&#xff0c;另一端称为栈底。栈中的数据元素遵守后进先出的原则 比如&#xff1a;羽毛球桶&#xff0c;弹夹等等 压…

苍穹外卖项目DAY05

苍穹外卖项目DAY05 1、店铺营业状态设置 1.1、Redis入门 Redis简介 Redis是一个基于内存的key-value结构数据库 基于内存存储&#xff0c;读写性能高适合存储热点数据&#xff08;热点商品、咨询、新闻&#xff09;企业应用广泛 中文网&#xff1a;https://www.redis.net…

【Java学习】Stream流详解

所属专栏&#xff1a;Java学习 Stream流是JDK 8引入的一个概念&#xff0c;它提供了一种高效且表达力强的方式来处理数据集合&#xff08;如List、Set等&#xff09;或数组。Stream API可以以声明性方式&#xff08;指定做什么&#xff09;来处理数据序列。流操作可以被分为两大…

[C++][opencv]基于opencv实现photoshop算法灰度化图像

测试环境】 vs2019 opencv4.8.0 【效果演示】 【核心实现代码】 BlackWhite.hpp #ifndef OPENCV2_PS_BLACKWHITE_HPP_ #define OPENCV2_PS_BLACKWHITE_HPP_#include "opencv2/core.hpp"namespace cv {class BlackWhite { public:float red; //红色的灰度系…

阿里云ubuntu系统安装mysql8.0

一、安装mysql8.0 1.已安装其他版本的mysql&#xff0c;需要删除 若没有不需要此操作 1 #卸载MySQL5.7版本 2 apt remove -y mysql-client5.7* mysql-community-server5.7* 4 # 卸载5.7的仓库信息 5 dpkg-l | grep mysql | awk iprint $2} | xargs dpkg -P2.更新仓库 apt u…

Python酷库之旅-第三方库Pandas(084)

目录 一、用法精讲 351、pandas.Series.str.isdigit方法 351-1、语法 351-2、参数 351-3、功能 351-4、返回值 351-5、说明 351-6、用法 351-6-1、数据准备 351-6-2、代码示例 351-6-3、结果输出 352、pandas.Series.str.isspace方法 352-1、语法 352-2、参数 3…

0815,析构函数,拷贝构造函数,赋值运算符函数

来自同济医院的问候 目录 01&#xff1a;对象创建 001.cc 003size.cc 02&#xff1a;对象销毁 004pointer.cc 005destroytime.cc 03&#xff1a;本类型对象的复制 3.1 拷贝构造函数 006cp.cc 007cptime.cc 008recursion.cc 009rightleft.cc 3.2 赋值运算符函数 …

平安城市/雪亮工程现状及需求分析:EasyCVR视频汇聚平台助力雪亮工程项目建设

一、背景现状 经过近几年的努力&#xff0c;平安城市雪亮工程建设取得了显著的成绩&#xff0c;完成了前端高清视频点位和高清卡口系统建设&#xff0c;建成了&#xff08;视频监控类&#xff09;、&#xff08;卡口类&#xff09;和&#xff08;应用类&#xff09;的平台。这…

BvSP_ Broad-view Soft Prompting for Few-Shot Aspect Sentiment Quad Prediction

中文题目: 英文题目: BvSP: Broad-view Soft Prompting for Few-Shot Aspect Sentiment Quad Prediction 论文地址: aclanthology.org/2024.acl-long.460.pdf 代码地址: https://github.com/byinhao/BvSP 论文级别&#xff0c; 单位: (2024 ACL long paper) 南开大学&#xff0…

Fortify三种扫描模式有什么区别?分别怎么用?

一、通过“Audit Workbench”进行测试 “Audit Workbench”支持Java语言源代码的测试。 二、通过“Scan Wizard”进行测试 “Scan Wizard”支持Java、Python、C/C、.Net、Go、PHP、Flex、Action Script、HTML、XML、JavaScript、TypeScript、Kotlin、SQL、ABAP、ColdFusion语言…

RCE编码绕过--php://filter妙用

目录 代码 如何绕过 payload构造 代码 <?php $content <?php exit; ?>; $content . $_POST[txt]; file_put_contents($_POST[filename],$content); 当你想要输入代码的时候前面会有<?php exit;?>;&#xff0c;代码没有办法执行下去&#xff0c;所以…

2024新型数字政府综合解决方案(三)

新型数字政府综合解决方案通过融合人工智能、大数据和云计算技术&#xff0c;建立了一个智能化、互联互通的政府服务平台&#xff0c;旨在提升政府服务效率与透明度。该方案通过全面数字化政务流程&#xff0c;实现数据的实时共享和自动化处理&#xff0c;使公众能够便捷地访问…

基于小土堆入门教程的pytorch训练神经网络方法实现

成果展示 在学习吴恩达机器学习和小土堆入门教程的基础上&#xff0c;完成了该实验&#xff0c;目前可以实现标准数据集的加载、网络模型的搭建及训练、数据可视化、GPU加速功能&#xff0c;是机器学习理论的初步实践 import torch import torchvision.datasets from torch i…

安卓应用开发学习:查看手机传感器信息

一、引言 在手机app的开发中经常会用到手机的传感器&#xff0c;在《Android App 开发进阶与项目实战》一书的第10章就介绍了传感器的一些功能和用法。要想使用传感器&#xff0c;首先得知道手机具备哪些传感器。书中有传感器类型取值的说明&#xff0c;并提供了一个查看手机传…

聊聊场景及场景测试

在我们进行测试过程中&#xff0c;有一种黑盒测试叫场景测试&#xff0c;我们完全是从用户的角度去理解系统&#xff0c;从而可以挖掘用户的隐含需求。 场景是指用户会使用这个系统来完成预定目标的所有情况的集合。 场景本身也代表了用户的需求&#xff0c;所以我们可以认为…

橙色简洁大气体育直播自适应模板赛事直播门户自适应网站源码

源码名称&#xff1a;酷黑简洁大气体育直播自适应模板赛事直播门户网站 源码开发环境&#xff1a;帝国cms 7.5 安装环境&#xff1a;phpmysql 带采集&#xff0c;可以挂着电脑上自动采集发布&#xff0c;无需人工操作&#xff01; 橙色简洁大气体育直播自适应模板赛事直播门户…

Java Web|day5.MyBatis

MyBatis 定义 它是一款半自动的ORM持久层框架&#xff0c;具有较高的SQL灵活性&#xff0c;支持高级映射(一对一&#xff0c;一对多)&#xff0c;动态SQL&#xff0c;延迟加载和缓存等特性&#xff0c;但它的数据库无关性较低 **ORM: **Object Relation Mapping&#xff0c;…

数字孪生技术框架:从数据到决策的桥梁

随着科技的飞速发展&#xff0c;数字孪生技术作为一种创新的信息化手段&#xff0c;正逐步渗透到各个行业领域&#xff0c;成为推动数字化转型的重要力量。数字孪生技术框架&#xff0c;作为支撑这一技术体系的核心架构&#xff0c;以其独特的层级结构&#xff0c;实现了从数据…