前端-库-学习 水印相关库

目录

[TOC]

 

1. 图片加水印

使用的库：

• [watermarkjs](https://www.npmjs.com/package/watermarkjs)

项目中使用

安装

# install via npm
$ npm install watermarkjs

# install via bower
$ bower install watermarkjs

使用

给 `photo.jpg`  增加水印 `logo.png`。

// watermark by local path
watermark(['img/photo.jpg', 'img/logo.png'])
  .image(watermark.image.lowerRight(0.5))
  .then(img => document.getElementById('container').appendChild(img));
 
// load a url and file object
const upload = document.querySelector('input[type=file]').files[0];
watermark([upload, 'img/logo.png'])
  .image(watermark.image.lowerLeft(0.5))
  .then(img => document.getElementById('container').appendChild(img));
 
// watermark from remote source
const options = {
  init(img) {
    img.crossOrigin = 'anonymous'
  }
};
watermark(['http://host.com/photo.jpg', 'http://host.com/logo.png'], options)
  .image(watermark.image.lowerRight(0.5))
  .then(img => document.getElementById('container').appendChild(img));

2. dom加水印

使用的库：

• [xasrd-utils](https://www.npmjs.com/package/xasrd-utils)

项目中使用

安装

# install via npm
$ npm install xasrd-utils

# install via yarn
$ yarn install xasrd-utils

使用

import {watermarkDom} from 'xasrd-utils';

function CustomAttr() {
  const [flag,setFlag]= useState(false);

  const setData = () => {
    watermarkDom({clear: flag});
  }
  
  return (
    <div>
        <button onClick={setData}>测试水印</button>
    </div>
  )
}