图片水印生成

作者:江月迟迟

发表于:2024-12-10

字数统计:693 字

预计阅读3分钟

介绍

很多网站都会通过给图片添加水印的形式来标记图片来源，维护版权。前端生成水印通常是通过 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	文字内容	string
  color	颜色值	string
  deg	旋转角度	number
  opacity	透明度	number
  count	水印数量	number

完成后的效果如下：

规定

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

判分标准

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

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

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

题解

/**
 * 创建一个文字水印的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;
}