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

130 阅读 0 评论 86 点赞

我是靠谱客的博主追寻含羞草，这篇文章主要介绍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>