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

server/2024/11/14 21:48:40/

在这里插入图片描述

在这里插入图片描述

效果

在这里插入图片描述

源码

<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/server/101901.html

相关文章

Python基础知识学习总结(一)

一. 简介 Python 是一个高层次的结合了解释性、编译性、互动性和面向对象的脚本语言。 Python 的设计具有很强的可读性&#xff0c;相比其他语言经常使用英文关键字&#xff0c;其他语言的一些标点符号&#xff0c;它具有比其他语言更有特色语法结构。 Python 是一种解释型语…

面试官:Java虚拟机是什么,Java虚拟机的内存模型是什么样子的?

哈喽&#xff01;大家好&#xff0c;我是小奇&#xff0c;一个专给面试官添堵的撑序员 小奇打算以轻松幽默的对话方式来分享一些技术&#xff0c;如果你觉得通过小奇的文章学到了东西&#xff0c;那就给小奇一个赞吧 文章持续更新&#xff0c;可以微信搜索【小奇JAVA面试】第一…

Hadoop之DataNode启动源码解析

Hadoop之DataNode启动源码解析 添加依赖 为了能够编译和运行 Hadoop 的 DataNode 组件&#xff0c;我们需要在项目的 pom.xml 文件中添加以下依赖&#xff1a; <dependencies><dependency><groupId>org.apache.hadoop</groupId><artifactId>h…

农业物联网6公里WiFi远距离传输模块,信号传输不再受限,抗干扰、连接快

在数字化时代&#xff0c;WiFi已成为我们生活中不可或缺的一部分。然而&#xff0c;你是否曾遇到过这样的困扰&#xff1a;在户外或大型场所&#xff0c;WiFi信号总是那么微弱&#xff0c;甚至完全无法连接。这时候&#xff0c;一种能够实现6公里远距离WiFi传输的神秘模块便应运…

uniapp本地打包app安装说明

uniapp本地打包app安装说明 目录 uniapp本地打包app安装说明一、打包说明1.HBuilder X 生成本地打包资源2.Android Studio和App离线SDK环境准备2.1 下载Android Studio和 App离线SDK2.2 资源替换2.3 id属性值修改。2.4 添加provider信息到AndroidManifest.xml中的<applicati…

HarmonyOS NEXT - Navigation组件封装BaseNavigation

demo 地址: https://github.com/iotjin/JhHarmonyDemo 代码不定时更新&#xff0c;请前往github查看最新代码 在demo中这些组件和工具类都通过module实现了&#xff0c;具体可以参考HarmonyOS NEXT - 通过 module 模块化引用公共组件和utils 官方介绍 组件导航 (Navigation)(推…

GNU/Linux - GNU Software之ncurses

下载了Linux Kernel&#xff0c;要make menuconfig时&#xff0c;出现错误&#xff1a; $ make menuconfig HOSTCC scripts/basic/fixdep HOSTCC scripts/kconfig/mconf.o <command-line>: fatal error: curses.h: No such file or directory compilation terminated…

【python】OpenCV—Optical Flow

文章目录 1、光流2、Opencv 中光流的实现3、稀疏光流4、密集光流4.1、farneback4.2、lucaskanade_dense4.3、rlof 5、涉及到的库5.1、cv2.goodFeaturesToTrack5.2、cv2.calcOpticalFlowPyrLK5.3、cv2.optflow.calcOpticalFlowSparseToDense5.4、cv2.calcOpticalFlowFarneback5.…