js实现图片加水印

博客介绍了如何将原本只适用于Node环境的watermark库改造为可以在网页上直接运行的版本,提供了一个在线demo,展示了如何使用JavaScript在图片上添加文字和图片水印。主要代码包括HTML和JavaScript部分,详细列出了API参数和使用方法。
摘要由CSDN通过智能技术生成

用到了一个叫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全局配置参数,详见optionsObject

方法

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

options

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值