给图片添加图片水印

一、项目场景:

        react + antd 4.x(此版本没有watermark水印),需要将后端传递的图片添加图片水印


二、水印添加:(此代码为修改好的)

import imgs from './水印图片.png'; // 引入水印图片...代码const [url, setUrl] = useState(''); // 状态管理变量,记录图片最终的路径,vue中使用data来控制...代码// 水印
const img = document.createElement('img');
img.src = backUrl;  // 需要添加水印的图片地址
img.crossOrigin = 'Anonymous'; // 设置跨域属性,没设置可能报cors问题
img.onload = () => {const watermark = new Image();watermark.src = imgs;watermark.crossOrigin = 'Anonymous';  // 设置跨域属性// 此上面三行必须写在img.onload里面,不然会有显示问题watermark.onload = () => {const canvas = document.createElement('canvas');let imgWidth = img.width;let imgHeight = img.height;let waterWidth = watermark.width;let waterHeight = watermark.height;canvas.width = img.naturalWidth;canvas.height = img.naturalHeight;const ctx = canvas.getContext('2d');ctx.drawImage(img, 0, 0, imgWidth, imgHeight);if (imgHeight > waterHeight) {ctx.drawImage(watermark,0,0,waterWidth * (imgHeight / waterHeight),imgHeight);} else if (imgWidth > waterWidth) {ctx.drawImage(watermark,0,0,imgWidth,waterHeight * (imgWidth / waterWidth));} else {ctx.drawImage(watermark, 0, 0);}const watermarkedImgSrc = canvas.toDataURL('image/jpeg');setUrl(watermarkedImgSrc); // 添加好水印的图片URL设置上去, vue的话直接用this赋值或者this.$set(待验证)};
};...代码

三、问题描述:

1、水印添加问题

2、水印添加完成后显示问题

// 水印
const img = document.createElement('img');
img.src = backUrl;  // 需要添加水印的图片地址
img.crossOrigin = 'Anonymous'; // 设置跨域属性,没设置可能报cors问题const watermark = new Image();
watermark.src = imgs;
watermark.crossOrigin = 'Anonymous'; img.onload = () => {// ...代码watermark.onload = () => {// ...代码}
}

四、原因分析:

        将watermark水印图片和img需要添加水印的图片同时创建了,以至于在img创建成功后watermark有可能还没有创建成功,导致没有进入watermark.onload的代码中


五、解决方案:

        将watermark的创建放在img.onload中

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

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

相关文章

Excel SUMPRODUCT函数用法(乘积求和,分组排序)

SUMPRODUCT函数是Excel中功能比较强大的一个函数,可以实现sum,count等函数的功能,也可以实现一些基础函数无法直接实现的功能,常用来进行分类汇总,分组排序等 SUMPRODUCT 函数基础 SUMPRODUCT函数先计算多个数组的元素之间的乘积…

Kubernetes安装nginx-controller作为统一网关

nginx-controller是什么呢? 它是一个能调度nginx的一个kubernetes operator,它能监听用户创建,更新,删除NginxConf对象,来调度本地的nginx实现配置的动态更新。如添加新的代理(http,https,tcp,udp),缓存(浏览器缓存,本地缓存),ssl证书(配置本身,ConfigMap,Secret),更新,删除等…

【Leetcode 2712】使所有字符相等的最小成本 —— 贪心法

2712. 使所有字符相等的最小成本 给你一个下标从0开始、长度为n的二进制字符串s,你可以对其执行两种操作: 选中一个下标i并且反转从下标0到下标i(包括下标 0 和下标 i )的所有字符,成本为 i 1 。 选中一个下标i并且…

c语言结构体与共用体

前面我们介绍了基本的数据类型 在c语言中 有一种特殊的数据类型 由程序员来定义类型 目录 一结构体 1.1概述 1.2定义结构体 1.3 结构体变量的初始化 1.4 访问结构体的成员 1.5结构体作为函数的参数 1.6指向结构的指针 1.7结构体大小的计算 二共用体 2.1概述 2.2 访…

04 Aras Innovator二次开发-客户端方法

客户端方法为JS方法。 系统提供了很多触发点,可以嵌入客户端方法,如下: 1 对象类的客户端事件页签: 2 窗体的Form Event和Filed Event 3.关系类的网格事件: 4 属性事件: 5.可自定义Action,触发客户端事件…

数据结构与算法:栈

朋友们大家好啊,在链表的讲解过后,我们本节内容来介绍一个特殊的线性表:栈,在讲解后也会以例题来加深对本节内容的理解 栈 栈的介绍栈进出栈的变化形式 栈的顺序存储结构的有关操作栈的结构定义与初始化压栈操作出栈操作获取栈顶元…

VR全景开启线上卖房新渠道,助力房企改变营销方式

当下房产行业,还在依靠传统线下发传单、跑客户、做地推吗?在短视频和直播火热的今天,房产行业也开启了线上卖房的新渠道,通过VR全景技术,可以为各个小区的线上宣传增加趣味性和互动性。 一、VR全景漫游可以彰显房源真实…

如何更换过期的SSL证书?

SSL证书是保护网站安全的重要组成部分,它能在客户端和服务器之间建立数据传输加密通道,防止数据在传输过程中被泄露、劫持和窃听。但SSL证书也有有效期限,当SSL证书到期时,您需要及时更换它,以确保网站的安全性和可信度…

Git基本操作(2)

Git基本操作(2) 上交文件之后,git文件的变化git cat-file HEAD指针里面有啥文件被修改git statusgit diff 文件名 版本回退(git reset)撤销回退git reflog 撤销的三种情况还没有addgit checkout -- [file] 已经add还没…

Pandas快问快答16-30题

16. 如何对一个Pandas数据框进行聚合操作? 聚合操作是数据处理中的一种重要方式,主要用于对一组数据进行汇总和计算,以得到单一的结果。在聚合操作中,可以执行诸如求和、平均值、最大值、最小值、计数等统计操作。这些操作通常用于从大量数…

Vue-Ajax核心知识整理

在Vue框架中可以有很多方式实现 ajax, 其中有xhr、jQuery、fetch、axios、vue-resource, 其中Vue的作者尤雨溪推荐使用axios,所以在使用Vue框架时,尽量还是使用axios 但是当我们使用ajax时,经常会遇到跨域的问题,比如你本地的端口…

MySQL中的高级查询

通过条件查询可以查询到符合条件的数据,但如同要实现对字段的值进行计算、根据一个或多个字段对查询结果进行分组等操作时,就需要使用更高级的查询,MySQL提供了聚合函数、分组查询、排序查询、限量查询、内置函数以实现更复杂的查询需求。接下…

15.一种坍缩式的简单——组合模式详解

当曾经的孩子们慢慢步入社会才知道,那年味渐淡的春节就像是疾驰在人生路上的暂停键。 它允许你在隆隆的鞭炮声中静下心来,瞻前顾后,怅然若失。 也允许你在寂静的街道上屏气凝神,倾听自己胸腔里的那团人声鼎沸。 孩子们会明白的&am…

正则表达式的一些高级用法

不允许出现某个单词,使用?! (?!Pattern).\.matches 表示.matches之前的不能是Pattern非贪婪匹配,在匹配项后加? matches\((.*?)\) 这里在.*后加问号,表示尽可能少的匹配。\w表示字母、数字和下划线防范redos攻击,可使用Cyber-…

汽车研发与制造中英文对照

1、技术开发概念和定义 FPDS(Ford Product Development System)福特产品开发系统 threetype chassis 三类底盘 inter-citybus 长途客车 PassengerVehicle 乘用车 MPV(Multi-PurposeVehicle)多用途汽车 SUV(Sports Uti…

【Flink精讲】Flink内核源码分析:命令执行入口

官方推荐per-job模式,一个job一个集群,提交时yarn才分配集群资源; 主要的进程:JobManager、TaskManager、Client 提交命令:bin/flink run -t yarn-per-job /opt/module/flink-1.12.0/examples/streaming/SocketWind…

Unity—JSON

每日一句:手简素中,感生活恬淡,心有所期,忙而不茫 目录 服务器 常见的服务器语言 Unity的开发语言 JSON 功能: JSON最简单的格式 JSON工具 支持的数据结构(C#对于JSON) 字符含义 JSON…

单片机stm32智能鱼缸

随着我国经济的快速发展而给人们带来了富足的生活,也有越来越多的人们开始养鱼,通过养各种鱼类来美化居住环境和缓解压力。但是在鱼类饲养过程中,常常由于鱼类对水质、水位及光照强度有着很高的要求,而人们也由于工作的方面而无法…

强化学习入门(Matlab2021b)-创建环境【3】

目录 1 前言2 根据类模板创建自定义环境2.1 创建类模板2.2 Environment properties(环境特性)2.3 Required Functions(需要的环境方法)2.3.1 Constructor function(构造函数)2.3.2 reset function2.3.3 step function2.4 Optional Functions(可选的环境方法)2.5 Environment Vi…

mysql升级到8后关键字变化导致mybatisplus问题解决方案

问题描述 因为mysql8新增了一些关键字,项目中正好用到了mysql8的关键字,导致查询报错 直接上解决方案 最简答的方案 直接在实体类属性上添加注解 示例 TableField(value "remarks") value的值是数据库字段名 ,两边拼接上"" 所有方案 #建议直接用第一…