图片水印生成

介绍

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

本题中你将封装一个创建文字水印的函数。

准备

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

1
2
3
4
5
6
7
8
├── 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 是项目中的原始图片文件。

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

1
2
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 | 文字内容 | string |
    | color | 颜色值 | string |
    | deg | 旋转角度 | number |
    | opacity | 透明度 | number |
    | count | 水印数量 | number |

完成后的效果如下：

完成效果

规定

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

判分标准

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

总通过次数: 2193 | 总提交次数: 2217 | 通过率: 98.9%

难度: 简单 标签: 蓝桥杯, 2023, 省赛, Web 前端, JS 函数封装

题解

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
/**
 * 创建一个文字水印的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(let i = 0; i < count; i++) {
    const span = document.createElement('span')
    span.innerText = text
    span.style.color = color
    span.style.transform = `rotate(${deg}deg)`
    span.style.opacity = opacity
    container.appendChild(span)
  }
  return container;
}