【蓝桥杯Web组题解2】图片水印生成

图片水印生成

介绍

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

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

目标

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

• createWatermark 函数参数说明

参数	说明	类型
text	文字内容	string
color	颜色值	string
deg	旋转角度	number
opacity	透明度	number
count	水印数量	number

完成后的效果如下：

/**
 * 创建一个文字水印的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 item = document.createElement("span");
    item.innerText = text;
    item.style.color = color;
    item.style.opacity = opacity;
    item.style.transform = `rotate(${deg}deg)`;
    container.appendChild(item);
  }
  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();
  });
});

或者改为：

  container.innerHTML+=`<span style="color:${color};transform: rotate(${deg}deg); opacity:${opacity}">${text}</span>`
  }