图片生成水印

如何使用 watermark-image-ts，作者用的纯ts写的代码开源易懂好修改

下载安装

  npm install watermark-image-ts --save

使用案例

html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>example</title>
    <script src="../dist/main.js"></script>
</head>

<body>
    <div>
        添加水印
    </div>
    <div onclick="down()">
        下载
    </div>
    <canvas id="canvas"></canvas>
</body>
<script>
    const obj = new Watermark(document.querySelector('#canvas'))
    function down(){
        console.log(obj)
        obj.downFile();   
    }
    obj.draw({
        img: './demo.png',
        text: "123",
        margin: 40,
        style: {
            rotate: -30,
            fillStyle:"rgba(0,0,0,.05)"
        }
    })
</script>

</html>

React

import { useEffect, useRef } from "react";
import "./App.css";
import demo from "./assets/demo.jpeg";
import Watermark from "watermark-image-ts";
function App() {
  const ref = useRef<any>({
    watermark: "",
  });
  const canvasRef = useRef<HTMLCanvasElement>(null);
  useEffect(() => {
    console.log(Watermark);
    ref.current.watermark = new Watermark(canvasRef.current!);
    ref.current.watermark.draw({
      img: demo,
      text: "demo--demo",
      margin: 40,
      style: {
        rotate: -30,
        fillStyle: "rgba(0,0,0,.05)",
      },
    });
  }, []);
  const down = () => {
    console.log("下载");
    ref.current.watermark.downFile();
  };
  return (
    <div className="App">
      <div
        onClick={() => {
          down();
        }}
      >
        下载
      </div>
      <canvas ref={canvasRef}></canvas>
      <img src={demo} />
    </div>
  );
}

export default App;

draw方法

属性	类型	是否必填	作用
img	`string(base64｜图片dom｜网络地址（需要允许跨越）)`	是
text	`string`	是	水印文案
margin	`number`	是	间距
style	`样式`	是	样式

style

属性	类型	是否必填	作用
rotate	`number`	是	旋转角度
fillStyle	`string`	是	字体样式

Demo online

codesandbox.io/p/sandbox/e…