js实现图片加水印

js图片加水印

空中湖

3008人浏览 · 2022-09-08 14:57:27

空中湖 · 2022-09-08 14:57:27 发布

用到了一个叫watermark的库，但是这个库的官方例子当中只有一个node的版本，我想仅仅实现一个单个index.html上就能运行的版本，于是将这个node源码拉下来，重新编译，改写了一下，弄了一个在网页上可立即运行的版本

先看看效果：

在线demo地址：js实现图片添加水印 (mubanmao.top)

主要代码：index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>起步</title>
	<script src="watermark.umd.js"></script>
    <style>
        #table {
            font-size: 20px;
            margin-top: 20px;
        }
        .wrap img{
          width: 45%;
          margin-right: 20px;
        }
    </style>
  </head>
  <body>
    <button id="create">添加水印</button>
    <div class="wrap">
      <img src="static/demo.jpg" id="img" alt="" >
    </div>
	<script>
document.getElementById('create').onclick = function(){
    const ele = document.getElementById('img')
    const can = new watermark(ele.getAttribute("src"), {
      fontSize: 26,
      fillStyle: '#fff',
      globalAlpha: 0.5,
      clip: {
        shape: 'rect',
        // padding: '10,50'
      }
    })
    can.addText('文字水印', {repeat: true, lineSpacing: 146, markSpacing: '50%' })
    can.addText('测试水印居中', {repeat: false, fontSize: 36, position: {right: '50%', bottom:  '50%'}, translate: '50%,50%'})
    can.addImage("static/mark.png", {repeat: false, markHeight: 26, lineSpacing: 146, start: 36})
    can.draw(function() {
      console.log('canvas.draw')
      ele.src = can.getBase64()
    })
}
	</script>
  </body>
</html>

参数

参数	说明	类型	可选值	默认值
url	要添加水印的图片地址	String	—	—
options	全局配置参数，详见options	Object	—	—

方法

名称	说明	参数
addText	添加文字水印	text, options（当前水印配置参数）
addImage	添加图片水印	url, options（当前水印配置参数）
draw	绘制图片，在addText/addImage之后调用	callback:Function
getBase64	获取图片base64地址，需在draw方法的回调函数内调用	——
getBlob	获取Blob对象，需在draw方法的回调函数内调用	——
getFile	获取File对象，需在draw方法的回调函数内调用	——

options

参数	说明	类型	可选值	默认值
fontSize	文字水印字体大小	Number	—	26
fillStyle	文字水印字体颜色	String	—	#ffffff
globalAlpha	水印透明度	Number	0-1之间小数	0.2
position	水印位置	Object	—	{left: 10, top: 10}
crossOrigin	是否开启跨域（需后端支持）	Boolean	—	false
translate	水印根据给定的参数，从当前元素位置移动	String/Array	—	0
repeat	水印是否重复	Boolean	—	false
rotate	水印旋转角度，repeat为true时有效	Number	—	-45
start	水印起始位置，repeat为true时有效	Number	—	0
markSpacing	两个相邻水印间隔，repeat为true时有效	Number/String	—	50%
lineSpacing	两行相邻水印间隔，repeat为true时有效	Number/String	—	60