前端图片加水印

张滚滚QAQ

已于 2023-10-18 16:51:06 修改

阅读量146

点赞数 1

文章标签：前端

于 2023-10-18 16:43:47 首次发布

本文链接：https://blog.csdn.net/qq_38040571/article/details/133909629

版权

文章介绍了如何使用HTML和Canvas在图片上添加水印，以及处理跨域问题的方法，包括服务器设置CORS头和云存储服务器的自动加水印功能。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>展开收起示例</title>
</head>
<body>
    <img id="uploadedImage" src="./aaa.jpg" alt="">
    <script>
        window.onload = () => {
           // 获取图片元素和水印文字内容
            const imageElement = document.getElementById("uploadedImage");
            const watermarkText = "水印 文字";

            // 创建一个新的 canvas 元素
            const canvas = document.createElement("canvas");
            const ctx = canvas.getContext("2d");

            // 设置 canvas 元素的尺寸和图片一样
            canvas.width = imageElement.width;
            canvas.height = imageElement.height;

            // 在 canvas 上绘制图片
            ctx.drawImage(imageElement, 0, 0);

            // 设置水印样式
            ctx.font = "20px Arial";
            ctx.fillStyle = "rgba(255, 255, 255, 0.5)"; //水印文字颜色和透明度
            ctx.textBaseline = "bottom";
            ctx.fillText(watermarkText, 10, canvas.height - 10); //绘制水印文字位置

            // 将带有水印的图片作为新的 src
            imageElement.src = canvas.toDataURL("image/jpeg");
        }
    </script>
</body>
</html>

注意：img的路径必须是本地的文件路径，如果是https路径会报

这是意味着使用的图片来自一个不可信任的源或跨域的图片，并且浏览器对跨域图片进行了安全限制。

浏览器会对跨域的图片应用"同源策略"，即禁止从一个域加载的图片在 Canvas 中进行像素级的读取访问。这是为了保护用户的隐私和防止恶意脚本窃取内容。

解决办法：服务器设置 CORS 头部：如果你无法控制图片的域，可以在服务器端设置跨域资源共享（CORS）头部，允许前端对图片进行处理。

现在云存储服务器都有自动加水印的功能，直接上传给后端，让后端传回带水印的http图片地址。

张滚滚QAQ

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
前端图片加水印

浏览器会对跨域的图片应用"同源策略"，即禁止从一个域加载的图片在 Canvas 中进行像素级的读取访问。这是为了保护用户的隐私和防止恶意脚本窃取内容。解决办法：服务器设置 CORS 头部：如果你无法控制图片的域，可以在服务器端设置跨域资源共享（CORS）头部，允许前端对图片进行处理。这是意味着使用的图片来自一个不可信任的源或跨域的图片，并且浏览器对跨域图片进行了安全限制。注意：img的路径必须是本地的文件路径，如果是https路径会报。或者直接上传给后端，让后端传回带水印的http图片地址。
复制链接

扫一扫