@nutui/nutui-react-taro/dist/esm/watermark.taro-DuJQHymA.js

京东风格的轻量级移动端 React 组件库，支持一套代码生成 H5 和小程序

import React__default, { useState, useEffect } from "react";
import { getSystemInfo, createOffscreenCanvas } from "@tarojs/taro";
import classNames from "classnames";
import { u as useConfig } from "./configprovider.taro-DpK4IiCE.js";
import { C as ComponentDefaults } from "./typings-DV9RBfhj.js";
const defaultProps = Object.assign(Object.assign({}, ComponentDefaults), { content: "", fullPage: true, zIndex: 2e3, gapX: 24, gapY: 48, width: 120, height: 64, startX: 0, startY: 0, image: "", imageWidth: 120, imageHeight: 64, rotate: -22, color: "rgba(0,0,0,.15)", fontStyle: "normal", fontWeight: "normal", fontSize: 14 });
const WaterMark = (props) => {
  const { locale } = useConfig();
  const { content, fullPage, zIndex, className, gapX, gapY, startX, startY, width, height, image, imageWidth, imageHeight, rotate, color, fontStyle, fontFamily, fontWeight, fontSize, style } = Object.assign(Object.assign({}, defaultProps), props);
  const [base64Url, setBase64Url] = useState("");
  const classPrefix = "nut-watermark";
  const classes = classNames(classPrefix, {
    [`${classPrefix}-full-page`]: fullPage
  });
  const cls = classNames(classes, className);
  useEffect(() => {
    init();
  }, []);
  const init = () => {
    let ratio = 1;
    getSystemInfo().then((res) => {
      ratio = res.pixelRatio;
      const canvasWidth = `${(gapX + width) * ratio}`;
      const canvasHeight = `${(gapY + height) * ratio}`;
      const markWidth = width * ratio;
      const markHeight = height * ratio;
      let ctx;
      let canvas;
      if (process.env.TARO_ENV === "h5") {
        canvas = document.createElement("canvas");
        ctx = canvas.getContext("2d");
        canvas.setAttribute("width", `${canvasWidth}px`);
        canvas.setAttribute("height", `${canvasHeight}px`);
      } else {
        canvas = createOffscreenCanvas({
          type: "2d",
          width: Number(canvasWidth),
          height: Number(canvasHeight)
        });
        ctx = canvas.getContext("2d");
      }
      if (ctx) {
        if (image) {
          ctx.translate(markWidth / 2, markHeight / 2);
          ctx.rotate(Math.PI / 180 * Number(rotate));
          let img;
          if (process.env.TARO_ENV === "h5") {
            img = new Image();
          } else {
            img = canvas.createImage();
          }
          img.crossOrigin = "anonymous";
          img.referrerPolicy = "no-referrer";
          img.src = image;
          img.onload = () => {
            ctx.drawImage(img, -imageWidth * ratio / 2, -imageHeight * ratio / 2, imageWidth * ratio, imageHeight * ratio);
            ctx.restore();
            setBase64Url(canvas.toDataURL());
          };
        } else if (content) {
          ctx.textBaseline = "middle";
          ctx.textAlign = "center";
          ctx.translate(markWidth / 2, markHeight / 2);
          ctx.rotate(Math.PI / 180 * Number(rotate));
          const markSize = Number(fontSize) * ratio;
          ctx.font = `${fontStyle} normal ${fontWeight} ${markSize}px/${markHeight}px ${fontFamily}`;
          ctx.fillStyle = color;
          ctx.fillText(content, startX, startY);
          ctx.restore();
          setBase64Url(canvas.toDataURL());
        }
      } else {
        throw new Error(locale.watermark.errorCanvasTips);
      }
    });
  };
  return React__default.createElement("div", { className: cls, style: Object.assign({ zIndex, backgroundSize: `${gapX + width}px`, backgroundImage: `url('${base64Url}')` }, style) });
};
WaterMark.displayName = "NutWaterMark";
export {
  WaterMark as W
};