watermarkjs中怎么设置图片水印
时间: 2024-02-12 22:04:27 浏览: 32
在使用 watermarkjs 设置图片水印时,可以按照以下步骤进行:
1. 引入 watermarkjs 库
```html
<script src="https://unpkg.com/watermarkjs@2.0.0/dist/watermark.min.js"></script>
```
2. 创建水印对象
```javascript
var watermark = watermarkjs([图片URL]);
```
3. 设置水印属性
```javascript
watermark.image(watermarkjs.image.center(0.5)) // 设置水印位置为图片中心
.text('水印文字', '18px Microsoft YaHei', '#fff', 0.5) // 设置水印文本及属性
.then(function (img) {
document.getElementById('output').appendChild(img); // 将添加水印后的图片输出到页面中
});
```
其中,watermarkjs.image.center(0.5) 表示将水印放置在图片中心位置,0.5 表示水印的大小占图片大小的比例。
text() 方法中,第一个参数为水印文本内容,第二个参数为水印文本的属性,包括字体、大小等,第三个参数为水印文本的颜色,第四个参数表示水印文本的透明度。
4. 将添加水印后的图片输出到页面中
```javascript
document.getElementById('output').appendChild(img);
```
其中,'output' 为需要输出到的 HTML 元素的 ID。
以上就是使用 watermarkjs 添加图片水印的基本步骤。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![.zip](https://img-home.csdnimg.cn/images/20210720083646.png)
![js](https://img-home.csdnimg.cn/images/20210720083646.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)