图片上传加时水印

做园区巡检需求时,需要巡检打卡拍照上传功能,并且在照片上添加当前时间的水印

  1. 创建canvas
  2. 拍照后拿着图片画到canvas上
  3. 同时获取当前时间也画到canvas上,
  4. 再将canvas生成base64的url
  5. 拿着合成的图片url进行下面的逻辑
  6. 上代码
function addWatermark(imagePath,mark,calback) {
	let date = new Date();
	let year = date.getFullYear();
	let month = date.getMonth() + 1;
	let day = date.getDay();
	let hours = date.getHours();
	let minutes = date.getMinutes();
	let seconds = date.getSeconds();
	hours = hours < 10 ? "0" + hours : hours;  
	minutes = minutes < 10 ? "0" + minutes : minutes;  
	seconds = seconds < 10 ? "0" + seconds : seconds;
	let str = year +'年'+ month+'月'+ day +'日'
	let str2 = hours + ":" + minutes + ":" + seconds
	let canvas = document.createElement('canvas');
	let context = canvas.getContext('2d');
	// 创建一个新的Image对象,用于加载原始图片
	let image = new Image();
	image.src = imagePath;
	// 在图片加载完成后执行下面的代码
	image.onload = function() {
		canvas.width = image.width;
		canvas.height = image.height;
		// 将原始图片绘制到canvas上
		context.drawImage(image, 0, 0);
		let size = image.width/20
		//将水印文本添加上
		context.font =  size+ "px Arial";
		context.fillStyle = "#FF0000"; // 设置填充颜色为红色  

		context.fillText(str + '  '+ str2, 20, size)
		if(mark){
				context.fillText(mark, 20, size*2)
		}
		// 将带有水印的图片转换为base64格式
		let watermarkedImage = canvas.toDataURL();
		calback&&calback(watermarkedImage)
	};
}
  1. 效果
    在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

HR9110H 单通道低压 H 桥电机驱动芯片

HR9110H为消费类产品、玩具和其它低电压或者电池供电的运动控制类应用提供了一个集成的电机驱动器解决方案。HR9110H是SOP8封装&#xff0c;且是无铅产品&#xff0c;符合环保标准。 HR9110H能够驱动一个直流有刷电机或其他诸如螺线管的器件。输出驱动模块由PMOSNMOS功率管构成…

WPF实战项目十六(客户端):备忘录接口

1、新增IMemoService接口&#xff0c;继承IBaseService接口 public interface IMemoService : IBaseService<MemoDto>{} 2、新增MemoService类&#xff0c;继承BaseService和IMemoService接口 public class MemoService : BaseService<MemoDto>, IMemoService{pub…

G1垃圾收集器

1.G1的目的&#xff1a; Garbage First&#xff0c;也就是垃圾优先原则&#xff0c;也就是空间方面的关注点。同时照顾到停顿时间以及吞吐量。 G1垃圾收集器的设计目的是避免完全回收&#xff0c;但是当并发收集不能足够快地回收内存时&#xff0c;就会发生完全回收GC。G1的完…

工业以太网交换机未来发展中的几个趋势

随着工业自动化不断发展和智能制造的推进&#xff0c;工业以太网交换机在未来的应用中将面临更多的发展机遇和挑战。在工业以太网交换机的未来发展中&#xff0c;有几个方面将成为趋势。 网络虚拟化 随着工业自动化系统规模的不断扩展&#xff0c;网络虚拟化将成为未来的发展方…

基于亚马逊云科技大语言模型等服务打造企业知识库

背景 大语言模型是自然语言处理领域的一项重要技术&#xff0c;能够通过学习大量的文本数据&#xff0c;生成具有语法和意义的自然语言文本。目前大语言模型已经成为了自然语言处理领域的一个热门话题&#xff0c;引起了广泛的关注和研究。 知识库需求在各行各业中普遍存在&a…

阿里云OSS代码集成部分问题分析

公司内部开发了一个文件相关的应用&#xff0c;由于服务器带宽限制导致多个用户同时上传或者下载文件时速度很慢&#xff0c;遂将文件迁移至阿里云OSS服务器。下面是迁移的过程中遇到的部分问题。 问题1. 跨域错误 错误信息如下&#xff1a; Access to XMLHttpRequest at htt…

关于同一接口有多个不同实现的设计方案

关于同一接口有多个不同实现的设计方案 前言 最近公司做了一个银行相关的项目&#xff0c;告诉我公司对接了多个银行的支付&#xff0c;每个银行都有对应的接口要去对接&#xff0c;比如&#xff1a;交易申请&#xff0c;交易取消&#xff0c;支付&#xff0c;回单&#xff0…

工作流引擎架构设计

一个应用MIS的系统的架构离不开工作流引擎&#xff0c;具有流程引擎思维的架构人员设计系统的时候就有流程的思维&#xff0c;他区别于过程思维&#xff0c;过程思维开发出来的系统&#xff0c;用户面对的是菜单、模块。而流程思维设计出来的系统就是发起、待办、在途、查询、近…

电子商务活动中无处不在的电商API接口|淘宝/天猫/京东/1688

我们的日常生活中无处不是API API已经成为我们日常生活中无处不在的技术&#xff0c;我们日常生活中的许多时刻都会涉及到API的应用&#xff1a; 支付API&#xff1a;支付API允许电商平台将其支付系统与第三方支付系统进行集成&#xff0c;从而为客户提供多种支付选项并实现更…

虚拟机系列:vmware和Oracle VM VirtualBox虚拟机的区别,简述哪一个更适合我?以及相互转换

一. VMware和Oracle VM VirtualBox虚拟机的区别主要体现在以下几个方面: 首先两种软件的安装使用教程如下: VMware ESXI 安装使用教程 Oracle VM VirtualBox安装使用教程 商业模式:VMware是一家商业公司,而Oracle VM VirtualBox是开源软件; 功能:VMware拥有更多的功能和…

docker安装nacos,实现和mysql容器的通信

1.下载nacos镜像 docker pull nacos/nacos-server2. 启动nacos 启动命令如下&#xff1a; docker run -d -p 8848:8848 --name nacos \ -e JVM_XMS256m \ -e JVM_XMX256m \ -e MODEstandalone \ -e SPRING_DATASOURCE_PLATFORMmysql \ -e MYSQL_SERVICE_HOST192.168.131.223…

css中flex两列布局(一列自适应其他固定)

问题 最近写一个布局的时候&#xff0c;遇到一个问题。如下图的布局。在没有图片的时候布局是正常的&#xff0c;如果有图片且设置了width:100%;height: 100%; 则会出现图片将自适应布局撑开的情况。 我的解决方式是让图片不缩放&#xff0c;图片外层再添加一个div元素。形如…

css Vue尺子样式

原生css生成尺子样式 <template><div class"page"><div class"Light"></div><div class"rile"><ul id"list"><!--尺子需要几个单位就加几个--><li></li><li></li&…

创意设计与个性化定制:酒精壁炉的独特之处

在当今家居装饰的潮流中&#xff0c;人们越来越注重个性化和创意&#xff0c;而酒精壁炉正是在这一趋势中崭露头角。它不仅成为家居的温馨之选&#xff0c;更因其设计的灵活性而成为创意焦点&#xff0c;吸引了越来越多注重家居设计的人群。 酒精壁炉的设计灵活性为家居注入了新…

kali部署ARL灯塔资产系统及使用教程

网上有很多ARL部署到centos系统的教程,但是部署到ubuntu或kali linux系统的教程都是乱七八糟,互相抄,而且没有一个能部署成功,鉴于此,写下此教程,帮助大家出坑 一、安装docker环境(网上什么弄钥匙呀,什么稳定源啊都是垃圾) 准备一个纯净的最新的kali linux系统 1、配…

巨菌草行业分析:到2027年市场规模预计将达到205.3亿元

中国菌草市场规模已逐渐扩大&#xff0c;并在各个领域发挥出其应用的巨大潜力。随着环保意识的普及和技术的不断创新&#xff0c;菌草市场有望继续保持良好的增长态势&#xff0c;为社会经济的可持续发展做出更大的贡献。 近年来&#xff0c;菌草这种新型的生态材料逐渐走进了大…

PostgreSQL Patroni 3.0 新功能规划 2023年 纽约PG 大会 (音译)

开头还是介绍一下群&#xff0c;如果感兴趣PolarDB ,MongoDB ,MySQL ,PostgreSQL ,Redis, Oceanbase, Sql Server等有问题&#xff0c;有需求都可以加群群内有各大数据库行业大咖&#xff0c;CTO&#xff0c;可以解决你的问题。加群请联系 liuaustin3 &#xff0c;&#xff08;…

“圆柱-计算公式“技术支持网址

该软件可以计算圆柱的底面圆周长、底面积、侧面积和体积。 您在使用中有遇到任何问题都可以和我们联系。我们会在第一时间回复您。 邮箱地址&#xff1a;elmo30zeongmail.com 谢谢&#xff01;

js检测dom变化的方法:MutationObserver

前言 检测一个原生dom的变化,如一个div的颜色,大小,所在位置,内部元素的属性是否变化,更深层dom树上的变化等等。 都可以使用一个window上暴露出来的一个api:MutationObserver 语法 官方地址:MutationObserver.MutationObserver() - Web API 接口参考 | MDN 使用new Mutat…

易点易动固定资产管理系统:全生命周期管理的理想选择

在现代企业中&#xff0c;固定资产管理是一项至关重要的任务。为了确保企业的资产安全、提高资产利用率&#xff0c;全面管理固定资产的生命周期至关重要。易点易动固定资产管理系统为企业提供了一种全面的解决方案&#xff0c;实现了从固定资产申购、采购、入库、领用、退库、…