js水印生成工具

朴灿烈づ我的快乐病毒、 2022-03-18 15:52 209阅读 0赞

# watermark #

水印生成工具

欢迎star [github][]

## 安装 ##

*  npm

npm install @fisher-zh/watermark

*  script

<script src="./dist/watermark.min.js"></script>

## 使用 ##

WaterMark({ 
        type = 'canvas',
        container: document.getElementById('canvas'),
        content = 'WaterMark',
        width = '300px',
        height = '200px',
        rotate = '30',
        fontSize = '20px',
        color = 'rgba(184, 184, 184, 0.8)'
    });

<table> 
 <thead> 
  <tr> 
   <th>参数</th> 
   <th>说明</th> 
   <th>类型</th> 
   <th>可选值</th> 
   <th>默认值</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>type</td> 
   <td>渲染方式</td> 
   <td>string</td> 
   <td>canvas/svg</td> 
   <td>canvas</td> 
  </tr> 
  <tr> 
   <td>container</td> 
   <td>挂载的DOM</td> 
   <td>object</td> 
   <td>-</td> 
   <td>document.body</td> 
  </tr> 
  <tr> 
   <td>content</td> 
   <td>水印内容</td> 
   <td>string</td> 
   <td>-</td> 
   <td>WaterMark</td> 
  </tr> 
  <tr> 
   <td>width</td> 
   <td>单个水印块的宽度</td> 
   <td>string</td> 
   <td>-</td> 
   <td>300px</td> 
  </tr> 
  <tr> 
   <td>height</td> 
   <td>单个水印块的高度</td> 
   <td>string</td> 
   <td>-</td> 
   <td>200px</td> 
  </tr> 
  <tr> 
   <td>rotate</td> 
   <td>水印文字的旋转角度</td> 
   <td>string/number</td> 
   <td>-</td> 
   <td>30</td> 
  </tr> 
  <tr> 
   <td>fontSize</td> 
   <td>水印文字的大小</td> 
   <td>string</td> 
   <td>-</td> 
   <td>20px</td> 
  </tr> 
  <tr> 
   <td>color</td> 
   <td>水印文字的颜色，</td> 
   <td>string</td> 
   <td>-</td> 
   <td>20px</td> 
  </tr> 
 </tbody> 
</table>

[github]: https://github.com/fisher-zh/watermark

发表评论取消回复

表情：

评论列表（有 0 条评论，209人围观）

还没有评论，来说两句吧...

相关阅读

相关 springboot生成PDF,并且添加水印

/ 导出调查问卷 / @ApiLog("导出调查问卷") @PostMapping("/print/{id}")

约定不等于承诺〃/ 2024年02月18日 11:44/ 0 赞/ 77 阅读

相关 PDF.js动态添加水印

因为我贴的代码改动了，和源码位置不同，需要在代码里面全局搜索，需要改的地方 1.添加到viewer.css .cover{ position:absol

落日映苍穹つ/ 2023年10月10日 12:49/ 0 赞/ 40 阅读

相关 Stegsolve查看隐水印（暗水印）java jar包工具

Stegsolve查看隐水印、隐写水印、暗水印的java jar包工具（1）下载jar包 [file/Stegsolve.jar at main · zhangp

分手后的思念是犯贱/ 2023年09月27日 04:23/ 0 赞/ 130 阅读

相关网页添加水印js

[参考一][Link 1] 通常加动态水印的思路是：后台服务端根据参数动态生成图片，前端设置body的background-url或者利用遮罩层+事件委托的方式实现。

深藏阁楼爱情的钟/ 2023年06月22日 03:20/ 0 赞/ 13 阅读

相关 Flink生成时间戳/水印

一.概述生成时间戳/水印与在事件时间有关。有关事件时间，处理时间和摄取时间，参考：[事件时间概述][Link 1] 为了处理事件时间，流式传输程序需要相应地设置时间

「爱情、让人受尽委屈。」/ 2023年02月17日 03:47/ 0 赞/ 24 阅读

相关 java生成图片，添加水印

private static final String URL = "D:/test/template.png"; public static Str

ゝ一纸荒年。/ 2023年02月15日 12:50/ 0 赞/ 6 阅读

相关 java生成水印_[转载]java操作word生成水印

应用场景为了保护版权或辨别文件的真伪，有时需要在生成的Word文件中动态添加水印，PageOffice组件的WaterMark类就封装了给在线编辑的Word文件添加水印这一

- 日理万妓/ 2022年11月05日 12:51/ 0 赞/ 212 阅读

相关 js水印生成工具

watermark 水印生成工具欢迎star [github][] 安装 npm npm install @fisher-zh/waterma

朴灿烈づ我的快乐病毒、/ 2022年03月18日 15:52/ 0 赞/ 210 阅读

相关 java文字生成水印图片

水印的英文叫“watermark”，是欧洲人发明的，有700年的历史了。水印是在造纸过程中通过改变纸浆的密度而形成的，水印分为2种，让纸变厚而形成的水印叫“[黑水印

浅浅的花香味﹌/ 2022年02月01日 07:53/ 0 赞/ 485 阅读

相关 JS水印功能

//传入动态水印内容 watermark({ watermark_txt: "扯淡" }); function watermark(settings)

骑猪看日落/ 2021年10月24日 05:58/ 0 赞/ 294 阅读