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

2023-11-25 07:58:33

公司有一个需求，需要在一个图片模板上添加文字水印供客户端保存下载，这个简单的功能用后端语言来实现觉得没有必要，所以参考网上的文章，使用js结合canvas就给实现出来了，效果还可以，兼容性还未测试 ,下面是效果图跟具体代码

参考地址：https://blog.csdn.net/weixin_39958248/article/details/117890432?spm=1001.2101.3001.6650.1&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7Edefault-1.no_search_link&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7Edefault-1.no_search_link

<!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.src = url;
        // 防止跨域引起的 Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.
        img.setAttribute("crossOrigin", "anonymous");
        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>

码农公寓

相关文章