vuejs3.0 从入门到精通——网页图形绘制：图片水印

网页图形绘制：图片水印

一、实验目标：

  • 掌握 Canvas 的基本用法。
  • 掌握 Canvas 图片引用的方法。
  • 掌握使用 Canvas 绘制文本的方法。
  • 掌握 Canvas 图形变形的方法。
  • 综合应用 Canvas 绘图技术，开发图片水印。

二、实验任务

使用 <canvas>标签结合 JS 制作带水印的图片，页面效果如下所示：

   效果图如右侧====>   

三、设计思路

在Web前端开发中，使用Canvas设计图片水印是一个常见的需求。下面是一个基本的设计思路简述：

3.1. 确定水印内容和样式

    • 内容：水印可以是文字、图片或二者的结合。例如，你可能希望在图片的某个角落添加“版权所有”的文字水印，或者在图片的中央放置一个半透明的LOGO图片作为水印。
    • 样式：设置水印的字体、大小、颜色、透明度、旋转角度等属性。对于图片水印，还需要考虑其大小和透明度。

3.2. 创建Canvas元素

    • 在HTML中创建一个<canvas>元素，并为其设置适当的宽度和高度，以匹配需要添加水印的图片尺寸。
    • 获取Canvas的2D渲染上下文，以便进行后续的绘图操作。

3.3. 加载图片

    • 使用new Image()创建一个Image对象，并设置其src属性为需要添加水印的图片的URL。
    • 监听Image对象的onload事件，确保图片加载完成后再进行水印的绘制。

3.4. 绘制水印

    • 在onload事件处理函数中，使用Canvas的绘图API绘制水印。
    • 对于文字水印，可以使用fillText()或strokeText()方法绘制文字。可以设置文字的字体、大小、颜色、位置等属性。
    • 对于图片水印，可以使用drawImage()方法将图片绘制到Canvas上。可以设置图片的位置、大小、透明度等属性。
    • 如果需要多个水印，可以重复绘制操作，调整水印的位置和属性。

3.5. 应用水印到图片

    • 绘制完水印后，使用toDataURL()方法将Canvas的内容转换为图片URL。
    • 可以将这个URL设置为<img>元素的src属性，或者直接在CSS中使用作为背景图片，从而显示带有水印的图片。

3.6. 优化与扩展

    • 性能优化：对于大型图片或大量水印，可以考虑使用离屏Canvas进行绘制，以减少页面重绘和提高性能。
    • 扩展功能：可以添加更多的交互功能，如允许用户自定义水印内容、样式和位置等。
    • 兼容性处理：考虑到不同浏览器的Canvas实现可能存在差异，需要进行必要的兼容性处理。

3.7. 注意事项

    • 跨域问题：如果图片来自不同的域，可能会遇到跨域问题。确保图片服务器支持CORS（跨源资源共享）或使用其他方法解决跨域问题。
    • 安全性：在处理用户上传的图片时，要确保对图片进行适当的验证和过滤，以防止恶意内容的注入。

4、实验实施（跟我做）

4.1、步骤一、创建项目和文件

创建项目watermark，并在项目中创建index.html页面文件，目录结构如下：

4.2、步骤二、准备 Canvas 环境

在 index.html 页面文件的 <body> 标签中添加 <canvas> 标签，定义容器大小（宽度、高度），定义容器 ID 为 "myCanvas"。代码如下：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--name="viewport"：定义了这个meta标签的名称，即“viewport”。viewport通常指的是浏览器窗口或移动设备的屏幕区域，它用于显示网页内容。-->
    <!--content="width=device-width, initial-scale=1.0"：定义了这个meta标签的内容。-->
    <!--width=device-width：这告诉浏览器页面的宽度应该等于设备的屏幕宽度。这样，当网页在移动设备上加载时，它会根据设备的屏幕宽度自动调整大小，而不是默认地将其缩放为桌面版的宽度。-->
    <!--initial-scale=1.0：这设置了页面的初始缩放级别。1.0表示页面应按其原始大小显示，不进行缩放。这有助于确保网页在加载时不会放大或缩小，从而为用户提供更好的浏览体验。-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>canvas 照片水印</title>
    <canvas id="myCanvas" width="500" height="500"></canvas>
</head>
<body>
    <script>
        // 在这里添加你的js代码
    </script>
</body>
</html>

4.3、步骤三、取/存图片

使用 JS 代码将图片绘制在 Canvas 的图层上。在 index.html 页面文件添加 <script>标签，引入 JS 代码，定义变量 img，以设置图片路径。在图片加载完成后，调用 Canvas 的 drawImage() 方法，将图片绘制在 Canvas 的图层上。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <!--name="viewport"：定义了这个meta标签的名称，即“viewport”。viewport通常指的是浏览器窗口或移动设备的屏幕区域，它用于显示网页内容。-->
    <!--content="width=device-width, initial-scale=1.0"：定义了这个meta标签的内容。-->
    <!--width=device-width：这告诉浏览器页面的宽度应该等于设备的屏幕宽度。这样，当网页在移动设备上加载时，它会根据设备的屏幕宽度自动调整大小，而不是默认地将其缩放为桌面版的宽度。-->
    <!--initial-scale=1.0：这设置了页面的初始缩放级别。1.0表示页面应按其原始大小显示，不进行缩放。这有助于确保网页在加载时不会放大或缩小，从而为用户提供更好的浏览体验。-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>canvas 照片水印</title>
    <canvas id="myCanvas" width="500" height="500"></canvas>
  </head>
  <body>
    <script>
      // 获取Canvas元素和上下文
      const canvas = document.getElementById("myCanvas");
      const ctx = canvas.getContext("2d");
 
      // 定义图片路径
      const imgSrc = "./img/img.jpg";
 
      // 创建Image对象并设置其源
      const img = new Image();
      img.src = imgSrc;
 
      // 当图片加载完成后
      img.onload = function () {
        // 绘制图片到Canvas上
        ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
      };
 
      // 如果图片加载失败
      img.onerror = function () {
        console.error("图片加载失败");
      };
    </script>
  </body>
</html>

4.4、步骤四、绘制水印

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8" />
    <!--name="viewport"：定义了这个meta标签的名称，即“viewport”。viewport通常指的是浏览器窗口或移动设备的屏幕区域，它用于显示网页内容。-->
    <!--content="width=device-width, initial-scale=1.0"：定义了这个meta标签的内容。-->
    <!--width=device-width：这告诉浏览器页面的宽度应该等于设备的屏幕宽度。这样，当网页在移动设备上加载时，它会根据设备的屏幕宽度自动调整大小，而不是默认地将其缩放为桌面版的宽度。-->
    <!--initial-scale=1.0：这设置了页面的初始缩放级别。1.0表示页面应按其原始大小显示，不进行缩放。这有助于确保网页在加载时不会放大或缩小，从而为用户提供更好的浏览体验。-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 
    <title>Canvas 照片水印</title> 
    <style> 
        body, html { 
            margin: 0; 
            padding: 0; 
            overflow: hidden; 
        } 
    </style> 
</head> 
<body> 
    <canvas id="myCanvas" width="500" height="500"></canvas> 
    <script> 
        // 获取Canvas元素和上下文 
        const canvas = document.getElementById("myCanvas"); 
        const ctx = canvas.getContext("2d"); 
   
        // 定义图片路径 
        const imgSrc = "./img/img.jpg"; 
   
        // 创建Image对象并设置其源 
        const img = new Image(); 
        img.src = imgSrc; 
   
        // 定义水印文字的属性 
        const watermarkText = "你们的胃叫胃, 孤的胃叫胃PLUS"; 
        const fontSize = 16; // 水印文字大小 
        const fontFamily = "Arial"; // 水印文字字体 
        const fillColor = "rgba(255, 255, 255, 0.5)"; // 水印文字颜色及透明度 
        const rotationAngle = 30; // 水印文字偏转角度 
        const textSpacing = 100; // 水印文字之间的间距 
        const repeatTimes = 20; // 水印文字重复次数 
   
        // 当图片加载完成后 
        img.onload = function () { 
            // 绘制图片到Canvas上 
            ctx.drawImage(img, 0, 0, canvas.width, canvas.height); 
   
            // 设置字体样式 
            ctx.font = `${fontSize}px ${fontFamily}`; 
   
            // 设置文字颜色 
            ctx.fillStyle = fillColor; 
   
            // 获取Canvas的宽度和高度 
            const canvasWidth = canvas.width; 
            const canvasHeight = canvas.height; 
   
            // 计算文字水印的起始位置 
            let x = canvasWidth * 0.05; 
            let y = canvasHeight * 0.05; 
   
            // 循环绘制水印文字 
            for (let i = 0; i < repeatTimes; i++) { 
                // 保存当前状态 
                ctx.save(); 
   
                // 旋转画布 
                ctx.rotate(rotationAngle * Math.PI / 180); 
   
                // 绘制水印文字 
                ctx.fillText(watermarkText, x, y); 
   
                // 恢复画布状态 
                ctx.restore(); 
   
                // 更新水印文字的位置 
                x += textSpacing; 
                if (x > canvasWidth - ctx.measureText(watermarkText).width) { 
                    x = canvasWidth * 0.05; 
                    y += textSpacing; 
                } 
   
                // 如果超出Canvas高度，则停止绘制 
                if (y > canvasHeight - fontSize) { 
                    break; 
                } 
            } 
        }; 
   
        // 如果图片加载失败 
        img.onerror = function () { 
            console.error("图片加载失败"); 
        }; 
    </script> 
</body> 
</html>
posted @   左扬  阅读(72)  评论(0)  编辑  收藏  举报
相关博文：
· vuejs3.0 从入门到精通——网页图形绘制：登录页面安全升级，JS动态生成图片验证码功能
· vuejs3.0 从入门到精通——项目搭建
· JS 图片添加水印
· 使用canvas在页面增加文字水印
· 在 JS 中使用 canvas 给图片添加文字水印
阅读排行：
· 阿里最新开源QwQ-32B，效果媲美deepseek-r1满血版，部署成本又又又降低了！
· 开源Multi-agent AI智能体框架aevatar.ai，欢迎大家贡献代码
· Manus重磅发布：全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· AI技术革命，工作效率10个最佳AI工具
levels of contents
点击右上角即可分享
微信分享提示
AI IDE Trae