js图片添加文字水印并设置水印居中的方法

直接上代码:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>添加文字水印</title>
</head>
<body>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
/**
* 图片路径转成canvas
* @param {图片url} url
*/
async function imgToCanvas(url) {
// 创建img元素
const img = document.createElement("img");
img.setAttribute("crossOrigin", "anonymous");
img.src = url;
// 防止跨域引起的 Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.
await new Promise((resolve) => (img.onload = resolve));

// 创建canvas DOM元素，并设置其宽高和图片一样
const canvas = document.createElement("canvas");

canvas.width = img.width;
canvas.height = img.height;
// 坐标(0,0) 表示从此处开始绘制，相当于偏移。
canvas.getContext("2d").drawImage(img, 0, 0);
return canvas;
}

/**
* canvas添加水印
* @param {canvas对象} canvas
* @param {水印文字} text
*/
function addWatermark(canvas, text) {
const ctx = canvas.getContext("2d");
ctx.fillStyle = "red";
ctx.textBaseline = "middle";
ctx.textAlign = 'center';
ctx.font = '28px Arial';

//设置文字水印居中的：canvas.width/2
//不需要居中请改为自定义值
ctx.fillText(text,canvas.width/2, 50);
return canvas;
}

/**
* canvas转成img
* @param {canvas对象} canvas
*/
function convasToImg(canvas) {
// 新建Image对象，可以理解为DOM
var image = new Image();

// canvas.toDataURL 返回的是一串Base64编码的URL
// 指定格式 PNG
image.src = canvas.toDataURL("image/png");
return image;
}

// 运行示例
async function run() {
const imgUrl ="https://p6.toutiaoimg.com/img/tos-cn-i-siecs4i2o7/0da4cc9409494d62b4db63939b4069f2~noop.image";

// 1.图片路径转成canvas
const tempCanvas = await imgToCanvas(imgUrl);

// 2.canvas添加水印
const canvas = addWatermark(tempCanvas, "ganganlee@outlook.com");

// 3.canvas转成img
const img = convasToImg(canvas);

// 查看效果
document.body.appendChild(img);
}

run();
</script>
</html>

js图片添加文字水印并设置水印居中的方法相关推荐

给图片添加文字（换行）水印
Android给图片添加半透明背景的水印 (水印带有半透明底色) 给图片添加文字(换行)水印 1.绘制富文本: /** * 绘制富文本* StaticLayout可实现换行* <p>* h ...
Java分享--给图片添加文字水印(文字可旋转)
这篇文章主要介绍了Java实现给图片添加文字水印,文字水印的方法,涉及java针对图片的读取.水印添加设置等相关操作技巧,需要的朋友可以参考下 . 很多时候项目中的图片需要一定的版权,就是人家拿出去用 ...
Swift - 给图片添加文字水印（图片上写文字，并可设置位置和样式）
想要给图片添加文字水印或者注释,我们需要实现在UIImage上写字的功能. 1,效果图如下: (在图片左上角和右下角都添加了文字.) 2,为方便使用,我们通过扩展UIImage类来实现添加水印功能 ( ...
Springboot中给图片添加文字水印
Springboot中给图片添加文字水印工作中遇到给图片添加文字水印的需求,记录下来方便之后查阅需求内容: 给一张图片添加指定文字水印,使一张图片上有多个水印内容,并且设定一个水印开关,可指定是否 ...
php生成背景并加字,PHP给图片添加文字水印实例
PHP给图片添加文字水印实例,支持中文文字水印,是否覆盖原图,自定义设置水印背景色.文字颜色.字体等. 水印类water.class.php var $Path = "./"; / ...
php给图片加图片水印,php给图片添加文字或图片水印实现代码
原标题:php给图片添加文字或图片水印实现代码一.文字水印文字水印就是在图片上加上文字,主要使用gd库的imagefttext方法,并且需要字体文件.效果图如下: $dst_path = 'dst ...
android图片上水印字体颜色,Android给图片添加文字和水印
话不多说上图 gif5新文件.gif public class ImageUtil { /** * 设置水印图片在左上角 * * @param context 上下文 * @param src * ...
php给图片添加文字水印
PHP对图片的操作用到GD库,这里我们介绍如何给图片添加文字水印. 大致分为四步: 1.打开图片 2.操作图片 3.输出图片 4.销毁图片下面我们上代码来具体讲解每步的实现过程: <?php/ ...
springboot——图片添加文字水印
springBoot 给图片添加文字水印项目要求给每个考生制作证书.这里我们有每个公司需要的背景图片模板,而我现在要做的就是把每个考生的考试信息和个人信息,以水印的形式添加到图片的指定位置.(现在这 ...
Python代码学习之给图片添加文字或图片水印
前言图片加水印有什么好处?在现今的数字化时代,网络上的图片泛滥,盗图现象也越来越严重.因此,在发布文章时,为了保护自己的原创作品版权,很多人选择使用水印来保护他们的图片.这样就能更好地做到: 1.版 ...

js图片添加文字水印并设置水印居中的方法

js图片添加文字水印并设置水印居中的方法相关推荐

最新文章

热门文章