图片水印生成
介绍
很多网站都会通过给图片添加水印的形式来标记图片来源,维护版权。前端生成水印通常是通过 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>`
}