js实现图片加水印

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

先看看效果：

主要代码：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

相关阅读:
快消品企业数字化转型解决方案
杰理的蓝牙芯片的key是什么？以及该如何添加key？杰理key文件原理
Mysql表创建，约束，主键，存储引擎的使用
代替虚拟化云安全工程师的解决方案
vue3+ele-plus+sortableJs对el-table使用sortableJs插件对表格拖拽时限定某列或某行不允许拖拽
矿产行业供应链协同系统解决方案：构建数智化平台，保障矿产资源安全供应
下一个倒下的是不是Genesis
leetcode 二分查找·系统掌握寻找旋转排序数组中的最小值II
c#采用toml做配置文件的坑过
cnn卷积神经网络反向传播,卷积神经网络维度变化

原文地址：https://blog.csdn.net/kongzhonghu/article/details/126764612