uni-app 拍照图片添加水印

获取图片信息

 uni.chooseImage({count: 6, //默认9sizeType: ["original", "compressed"], //可以指定是原图还是压缩图,默认二者都有sourceType: ["camera"], //从相册选择success: async function (result: any) {if (!props.isMark) {const res: any = await uploadFilePromise(result.tempFilePaths[0]);if (res) {show.value = false;}emit("handleFileList", res);return;}show.value = true;const reader = new FileReader();reader.onload = async (e: any) => {originalImage.value = e.target.result;await addWatermark();};reader.readAsDataURL(result.tempFiles[0]);},});

添加水印

  1. 由于使用canvas添加水印后图片很大,所以压缩一下图片大小
  2. 使用compressImg1方法压缩图片大小
const addWatermark = () => {const img = new Image();img.onload = async () => {const canvas = document.createElement("canvas");const ctx: any = canvas.getContext("2d");// 设置画布大小与图片相同canvas.width = img.width;canvas.height = img.height;// 绘制原图ctx.drawImage(img, 0, 0);// 添加水印// 设置字体大小,假设图片宽度大于600px,字体大小为24px,否则为图片宽度的10%var fontSize = canvas.width > 600 ? canvas.width / 20 : 16;// 设置字体大小,并将其转换为像素值console.log(fontSize, "fontSizefontSize字体大小---");ctx.font = fontSize + "px Arial";// 设置字体样式let time = moment().format("YYYY-MM-DD HH:MM:SS");let height = canvas.height - 50;let height1 = canvas.height - 20;if (canvas.width > 600) {height = canvas.height - 290;height1 = canvas.height - 50;}//获取图片指定位置的像素颜色const pixel = ctx.getImageData(10, height, 1, 1).data;// 计算相对于背景的亮度const luminance = 0.2126 * pixel[0] + 0.7152 * pixel[1] + 0.0722 * pixel[2];// 根据亮度选择水印字体颜色const fontColor = luminance > 128 ? "black" : "#fff";ctx.fillStyle = fontColor ; // 半透明白色ctx.fillText("时间:" + time, 15, height);ctx.fillText(latLng.value, 15, height1);// 转换为 Base64watermarkedImage.value = await canvas.toDataURL("image/png", 0.8);let imgURL = await compressImg1(watermarkedImage.value, 0.8); // 压缩图片console.log(getBase64ImageSize(imgURL), "图片大小11111111111111");const result: any = await uploadFilePromise(imgURL);if (result) {show.value = false;}emit("handleFileList", result);};img.src = originalImage.value;
};

压缩图片的方法

export const   compressImg1 =  (base64, multiple)=> {return new Promise((resolve, reject) => {try {// 第一个参数就是需要加密的base65,// 第二个是压缩系数 0-1,// 第三个压缩后的回调 用来获取处理后的 base64if (!base64) {return}const length = base64.length / 1024// 压缩方法let newImage = new Image()let quality = 0.6    // 压缩系数0-1之间newImage.src = base64newImage.setAttribute('crossOrigin', 'Anonymous') // url为外域时需要let imgWidth,imgHeightlet w = undefinednewImage.onload = function () {// 这里面的 this 指向 newImage// 通过改变图片宽高来实现压缩w = this.width * multipleimgWidth = this.widthimgHeight = this.heightlet canvas = document.createElement('canvas')let ctx = canvas.getContext('2d')if (Math.max(imgWidth, imgHeight) > w) {if (imgWidth > imgHeight) {canvas.width = w// 等比例缩小canvas.height = w * (imgHeight / imgWidth)} else {canvas.height = w// 等比例缩小canvas.width = w * (imgWidth / imgHeight)}} else {canvas.width = imgWidthcanvas.height = imgHeight// quality 设置转换为base64编码后图片的质量,取值范围为0-1  没什么压缩效果// 还是得通过设置 canvas 的宽高来压缩quality = 0.6}ctx.clearRect(0, 0, canvas.width, canvas.height)ctx.drawImage(this, 0, 0, canvas.width, canvas.height) //  // 这里面的 this 指向 newImagelet smallBase64 = canvas.toDataURL('image/jpeg', quality) // 压缩语句// 必须通过回调函数返回,否则无法及时拿到该值,回调函数异步执行console.log(`压缩前:${length}KB`)console.log(`压缩后:${smallBase64.length / 1024} KB`)resolve(smallBase64) }
}
catch (error) {reject(error)throw new Error(error)
}
})}

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

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

相关文章

2024最新版安装教程!Python安装+PyCharm安装使用教程!!(非常简单)

Python下载安装 一、进入Python官网首页,下载最新版的Python 官方网址:Download Python | Python.org 鼠标悬浮在Downloads,选择最新版本 注意:由于Python官网服务器设立在国外,所以下载速度非常慢,我这…

STM32 SPI串行总线

目录 STM32的SPI通信原理 SPI串行总线概述 SPI串行总线互连方式 STM32F1 SPI串行总线的工作原理 SPI串行总线的特征 SPI串行总线的内部结构 SPI串行总线时钟信号的相位和极性 STM32的SPI接口配置 STM32的SPI接口数据发送与接收过程 SPI的HAL 驱动函数 STM32的SPI通信…

Oracle Linux 9 (CentOS Stream 9) 安装 node.js 20

Oracle Linux 的 node 默认版本为 16,运行dnf update也无法改变大版本,还需要进行额外操作1 查看支持的版本 sudo dnf module list nodejs输出如下 Last metadata expiration check: 3:37:22 ago on Fri 11 Oct 2024 09:08:18 PM JST. Oracle Linux 9 Ap…

Linux高级编程_32_磁盘映射

文章目录 磁盘映射相关函数mmap函数作用: munmap函数作用: truncate 函数作用: 语法:使用步骤: 磁盘映射 概述: > 存储映射 I/O (Memory-mapped I/O) 使一个磁盘文件与存储空间中的一个缓冲区相映射。…

H7-TOOL的LUA小程序教程第14期:任意波形信号发生器,0-20mA输出和微型数控电源(2024-10-11,已更新)

LUA脚本的好处是用户可以根据自己注册的一批API(当前TOOL已经提供了几百个函数供大家使用),实现各种小程序,不再限制Flash里面已经下载的程序,就跟手机安装APP差不多,所以在H7-TOOL里面被广泛使用&#xff…

Springmvc Thymeleaf 标签

Thymeleaf是一个适用于Java的模板引擎,它允许开发者将动态内容嵌入到HTML页面中。在SpringMVC框架中,Thymeleaf可以作为一个视图解析器,使得开发者能够轻松地创建动态网页。以下是关于SpringMVC中Thymeleaf标签的详细介绍: 一、T…

vue3学习:数字时钟遇到的两个问题

在前端开发学习中,用JavaScript脚本写个数字时钟是很常见的案例,也没什么难度。今天有时间,于是就用Vue的方式来实现这个功能。原本以为是件非常容易的事,没想到却卡在两个问题上,一个问题通过别人的博文已经找到答案&…

如何解决Elasticsearch容器因“Connection refused”导致的问题

在使用Elasticsearch时,尤其是将Elasticsearch部署在Docker容器中,可能会遇到连接被拒绝(Connection refused)的情况。 1. 问题现象 在执行Python脚本或其他操作时,可能会遇到如下错误提示: elasticsear…

使用 `netcat`(nc)工具进行TCP数据发送和接收

Netcat(通常缩写为nc)是一个功能强大的网络工具,常被称为“瑞士军刀”的网络工具。它用于在网络上进行各种操作,比如读写网络连接、调试和分析网络服务等。以下是关于Netcat的一些详细介绍: ### 主要功能 1. **TCP/U…

Java—继承性与多态性

目录 一、this关键字 1. 理解this 2. this练习 二、继承性 2.1 继承性的理解 2.1.1 多层继承 2.2 继承性的使用练习 2.2.1 练习1 2.2.2 练习2 2.3 方法的重写 2.4 super关键字 2.4.1 子类对象实例化 三、多态性 3.1 多态性的理解 3.2 向下转型与多态练习 四、Ob…

03 django管理系统 - 部门管理 - 部门列表

部门管理 首先我们需要在models里定义Dept类 # 创建部门表 class Dept(models.Model):name models.CharField(max_length100)head models.CharField(max_length100)phone models.CharField(max_length15)email models.EmailField()address models.CharField(max_length2…

使用verilog设计实现简单神经网络加速器及其仿真

以下是使用FPGA实现简单神经网络加速器的基本步骤: **一、神经网络模型选择与简化** 1. **选择合适的神经网络模型** - 对于简单的神经网络加速器,可以选择多层感知机(MLP)作为基础模型。MLP由输入层、隐藏层和输出层组成,各层之间通过全连接方式连接。 - 例如,构…

k8s : 在master节点部署服务

部署多个work节点过于麻烦,于是打算直接在master节点部署服务测试 解决办法: k8s集群init后,你的master节点会被固定分配污点taint信息,这个污点的作用是让没有设置容忍的pod不会被调度到这个节点,因此我们的服务一般…

【Python】selenium获取鼠标在网页上的位置,并定位到网页位置模拟点击的方法

在使用Selenium写自动化爬虫时,遇到验证码是常事了。我在写爬取测试的时候,遇到了点击型的验证码,例如下图这种: 这种看似很简单,但是它居然卡爬虫?用简单的点触验证码的方法来做也没法实现 平常的点触的方…

十一、数据库的设计规范

文章目录 1. 为什么需要数据库设计2. 范式2.1 范式介绍2.2 范式都包括哪些2.3 键和相关属性的概念2.4 第一范式(1st NF)2.5 第二范式(2nd NF)2.6 第三范式(3rd NF)2.7 小结3. 反范式化3.1 概述3.2 应用举例3.3 反范式的新问题3.4 反范式的使用场景3.4.1 增加冗余字段的建议3.…

[Linux#65][TCP] 详解 延迟应答 | 捎带应答 | 流量控制 | 拥塞控制

目录 一、延迟应答 二、捎带应答 三. 流量控制 总结 四. 拥塞控制 1. 拥塞控制 2. 慢启动机制: 3.思考 4.拥塞避免算法 5. 快速恢复算法 一、延迟应答 1. 立即应答问题 接收数据的主机若立刻返回ACK应答,可能返回的窗口较小。例如&#xff1…

安装测试hasura

遗憾的是hasura 访问MySQL是收费的,访问PostgreSQL和MS SQL Server是免费的。 安装PG数据库 # 运行Hasura容器 docker run -d --name postgres-hasura -e POSTGRES_PASSWORDPassw0rd -e POSTGRES_DBhasura -p 5433:5432 postgres docker exec -it postgres-hasu…

匿名函数lambda

在 Python 中,lambda 函数是一种匿名函数(即没有名字的函数)。它通常用于编写简短的函数,特别是在不需要正式定义一个完整函数的情况下。 1. 基本语法 lambda 函数的语法非常简单: lambda 参数: 表达式lambda 关键字…

TDC上YARN Web-UI 查看application日志方法

方法一 #通过浏览器访问tdc,访问的工作节点对于TDC都是外部节点。在提交给yarn任务后,YarnRM的Web UI 可以展示yarnnm上运行的application日志,但是由于跳转的svc地址,无法直接访问。 #在tdc界面上找到yarn实例,进入ya…

Facebook直播分析与问题解决策略

Facebook直播(Facebook Live)是一种通过Facebook平台进行的实时视频流媒体功能,使用户能够与朋友、关注者或公众分享实时内容。自从推出以来,Facebook直播逐渐成为企业营销、个人表达和社交互动的重要工具。本文将分析Facebook直播…