【Html.js ——效果实现】图片水印生成（蓝桥杯真题-5134）【合集】

Rossy Yan

发布于 2025-02-17 15:17:36

4600

代码可运行

文章被收录于专栏：【Educoder实训】头歌实践教学平台【Educoder实训】头歌实践教学平台

运行总次数：0

代码可运行

背景介绍

很多网站都会通过给图片添加水印的形式来标记图片来源，维护版权。前端生成水印通常是通过 canvas 实现，但实际上我们也可以直接利用 CSS 来实现图片水印，这样做会有更好的浏览器兼容性。本题中你将封装一个创建文字水印的函数。

准备步骤

开始答题前，需要先打开本题的项目代码文件夹，目录结构如下：

├── css
│   └── style.css
├── images
│   └── origin.png
├── index.html
└── js
    ├── dom-to-image.js
    └── index.js

其中：

index.html 是主页面。
css/style.css 是样式文件。
js/index.js 是需要补充代码的 js 文件。
js/dom-to-image.js 是生成图片的第三方库，此文件无需修改。
images/origin.png 是项目中的原始图片文件。

注意：打开环境后发现缺少项目代码，请手动键入下述命令进行下载：

cd /home/project
wget https://labfile.oss.aliyuncs.com/courses/18213/watermark.zip && unzip watermark.zip && rm watermark.zip

在浏览器中预览 index.html 页面效果如下所示：

目标效果

请完善 js/index.js 文件中的 TODO 部分，实现创建水印函数的功能，创建的水印需要使用 <span> 标签展示。

createWatermark 函数参数说明

参数说明类型text文字内容stringcolor颜色值stringdeg旋转角度numberopacity透明度numbercount水印数量number 完成后的效果如下：

要求规定

请严格按照考试步骤操作，切勿修改考试默认提供项目中的文件名称、文件夹路径、class 名、id 名、图片名等，以免造成无法判题通过。

判分标准

本题完全实现题目目标得满分，否则得 0 分。

通关代码✔️

/**
 * 创建一个文字水印的div
 * @param  {string} text - 水印文字
 * @param  {string} color - 水印颜色
 * @param  {number} deg - 水印旋转角度
 * @param  {number} opacity - 水印透明度
 * @param  {number} count - 水印数量
 */
function createWatermark(text, color, deg, opacity, count) {
  // 创建水印容器
  const container = document.createElement("div");
  container.className = "watermark";

    // TODO: 根据输入参数创建文字水印
    for(var i=0;i<count;i++){
      let ospan = document.createElement('span')
      ospan.innerHTML = text
      ospan.style.color = color
      ospan.style.opacity = opacity
      ospan.style.transform = `rotate(${deg}deg)`
      container.appendChild(ospan)
    }
      
  return container;
}

// 以下代码不需要修改
// 调用createWatermark方法，创建图片水印
const watermark = createWatermark("WaterMark", "white", 45, 0.5, 11);
// 将水印挂载到图片容器上
const container = document.querySelector(".container");
container.appendChild(watermark);

// 提供图片保存功能
const button = document.querySelector("button");
button.addEventListener("click", () => {
  domtoimage.toJpeg(document.querySelector(".container")).then((dataUrl) => {
    const link = document.createElement("a");
    link.download = "image.jpeg";
    link.href = dataUrl;
    link.click();
  });
});

代码解析📑

一、HTML 部分

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="css/style.css">
  <title>图片水印生成</title>
</head>

<body>
  <main>
    <div class="container">
      <img src="images/origin.png" alt="cat" />
    </div>
    <button>保存图片</button>
  </main>
  <script src="js/dom-to-image.js"></script>
  <script src="js/index.js"></script>
</body>

</html>

文档声明与头部信息：
- <!DOCTYPE html>：声明文档类型为 HTML5。
- <html lang="en">：设置文档语言为英语。
- <head> 标签内包含了页面的元数据，如字符编码 charset="UTF-8"、兼容性设置 http-equiv="X-UA-Compatible"、视口设置 name="viewport"，还引入了外部样式表 css/style.css 并设置了页面标题。
主体部分：
- <main> 标签是 HTML5 新增的语义化标签，用于表示页面的主要内容区域。
- <div class="container">：创建一个容器 div，用于包裹图片元素。
- <img src="images/origin.png" alt="cat" />：显示一张图片，图片路径为 images/origin.png，alt 属性用于在图片无法加载时显示替代文本。
- <button>保存图片</button>：创建一个按钮，用于触发保存图片的操作。
脚本引入：
- <script src="js/dom-to-image.js"></script>：引入 dom-to-image.js 库，该库用于将 DOM 元素转换为图像数据。
- <script src="js/index.js"></script>：引入自定义的 JavaScript 脚本文件 js/index.js，用于实现水印生成和图片保存的逻辑。

二、JavaScript 部分

/**
 * 创建一个文字水印的div
 * @param  {string} text - 水印文字
 * @param  {string} color - 水印颜色
 * @param  {number} deg - 水印旋转角度
 * @param  {number} opacity - 水印透明度
 * @param  {number} count - 水印数量
 */
function createWatermark(text, color, deg, opacity, count) {
  // 创建水印容器
  const container = document.createElement("div");
  container.className = "watermark";

  // 根据输入参数创建文字水印
  for (var i = 0; i < count; i++) {
    let ospan = document.createElement('span');
    ospan.innerHTML = text;
    ospan.style.color = color;
    ospan.style.opacity = opacity;
    ospan.style.transform = `rotate(${deg}deg)`;
    container.appendChild(ospan);
  }

  return container;
}

// 以下代码不需要修改
// 调用createWatermark方法，创建图片水印
const watermark = createWatermark("WaterMark", "white", 45, 0.5, 11);
// 将水印挂载到图片容器上
const container = document.querySelector(".container");
container.appendChild(watermark);

// 提供图片保存功能
const button = document.querySelector("button");
button.addEventListener("click", () => {
  domtoimage.toJpeg(document.querySelector(".container")).then((dataUrl) => {
    const link = document.createElement("a");
    link.download = "image.jpeg";
    link.href = dataUrl;
    link.click();
  });
});

createWatermark 函数：
- 该函数接受五个参数：text（水印文字）、color（水印颜色）、deg（水印旋转角度）、opacity（水印透明度）和 count（水印数量）。
- 首先创建一个 div 元素作为水印容器，并为其添加 watermark 类名。
- 使用 for 循环创建指定数量的 span 元素，每个 span 元素包含水印文字，并设置其颜色、透明度和旋转角度。
- 将每个 span 元素添加到水印容器中，最后返回该容器。
调用 createWatermark 函数：
- 调用 createWatermark 函数，传入具体的参数，生成水印容器。
- 使用 document.querySelector(".container") 选择图片容器，并将生成的水印容器添加到图片容器中。
图片保存功能：
- 使用 document.querySelector("button") 选择保存图片的按钮，并为其添加点击事件监听器。
- 当按钮被点击时，使用 domtoimage.toJpeg 方法将图片容器转换为 JPEG 格式的 Data URL。
- 创建一个 <a> 元素，设置其 download 属性为 image.jpeg，并将生成的 Data URL 赋值给其 href 属性。
- 最后模拟点击 <a> 元素，触发图片下载。

三、工作流程▶️

页面加载：浏览器解析 HTML 文件，加载外部样式表和脚本文件。
水印生成：
- 调用 createWatermark 函数，根据传入的参数创建水印容器和多个 span 元素，每个 span 元素包含水印文字，并设置其样式。
- 将生成的水印容器添加到图片容器中，实现水印的显示。
图片保存：
- 用户点击保存图片的按钮，触发点击事件监听器。
- 使用 domtoimage.toJpeg 方法将包含图片和水印的容器转换为 JPEG 格式的 Data URL。
- 创建一个下载链接，将 Data URL 赋值给链接的 href 属性，并设置下载文件名。
- 模拟点击下载链接，触发图片下载。