博客

js实现图片加水印

  • Post author:
  • Post category:其他


用到了一个叫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


版权声明：本文为kongzhonghu原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。