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"。代码如下：

<!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 的图层上。

<!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、步骤四、绘制水印

<!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 @ 2024-04-07 10:18 左扬阅读(11) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

左扬(你们的胃叫胃，孤的叫胃PLUS)

读书不觉春已深，一寸光阴一寸金。