@nutui/nutui 4.3.14 → 4.3.15-beta.2

package/dist/packages/watermark/Watermark.js

@@ -17,12 +17,33 @@ var __spreadValues = (a, b) => {
   return a;
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __async = (__this, __arguments, generator) => {
+  return new Promise((resolve, reject) => {
+    var fulfilled = (value) => {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var rejected = (value) => {
+      try {
+        step(generator.throw(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
+    step((generator = generator.apply(__this, __arguments)).next());
+  });
+};
 import { defineComponent, ref, computed, watchEffect, openBlock, createElementBlock, normalizeClass, normalizeStyle } from "vue";
+import Taro from "@tarojs/taro";
 import { w as withInstall } from "../with-install-Ch3FF0uS.js";
 const _sfc_main = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({}, {
   name: "NutWatermark"
 }), {
-  __name: "watermark",
+  __name: "watermark.taro",
   props: {
     gapX: { default: 24 },
     gapY: { default: 48 },
@@ -51,7 +72,35 @@ const _sfc_main = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({
         [`${prefixCls}-full-page`]: props.fullPage
       };
     });
-    const init = () => {
+    const init = () => __async(this, null, function* () {
+      let ratio = 1;
+      Taro.getSystemInfo({
+        success(res) {
+          ratio = res.pixelRatio;
+        }
+      });
+      const canvasWidth = `${(props.gapX + props.width) * ratio}`;
+      const canvasHeight = `${(props.gapY + props.height) * ratio}`;
+      const markWidth = props.width * ratio;
+      const markHeight = props.height * ratio;
+      const canvas = Taro.createOffscreenCanvas({
+        type: "2d",
+        width: Number(canvasWidth),
+        height: Number(canvasHeight)
+      });
+      const ctx = canvas.getContext("2d");
+      if (ctx) {
+        if (props.image) {
+          const img = canvas.createImage();
+          dealWithImage(ctx, img, ratio, ctx.canvas, markWidth, markHeight);
+        } else if (props.content) {
+          dealWithText(ctx, ratio, ctx.canvas, markWidth, markHeight);
+        }
+      } else {
+        throw new Error("当前环境不支持Canvas");
+      }
+    });
+    const initH5 = () => {
       const canvas = document.createElement("canvas");
       const ratio = window.devicePixelRatio;
       const ctx = canvas.getContext("2d");
@@ -61,49 +110,60 @@ const _sfc_main = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({
       const markHeight = props.height * ratio;
       canvas.setAttribute("width", canvasWidth);
       canvas.setAttribute("height", canvasHeight);
+      console.log(markWidth, markHeight, canvasWidth, canvasHeight, ratio);
       if (ctx) {
         if (props.image) {
-          ctx.translate(markWidth / 2, markHeight / 2);
-          ctx.rotate(Math.PI / 180 * Number(props.rotate));
           const img = new Image();
-          img.crossOrigin = "anonymous";
-          img.referrerPolicy = "no-referrer";
-          img.src = props.image;
-          img.onload = () => {
-            ctx.drawImage(
-              img,
-              -props.imageWidth * ratio / 2,
-              -props.imageHeight * ratio / 2,
-              props.imageWidth * ratio,
-              props.imageHeight * ratio
-            );
-            ctx.restore();
-            base64Url.value = canvas.toDataURL();
-          };
+          dealWithImage(ctx, img, ratio, canvas, markWidth, markHeight);
         } else if (props.content) {
-          ctx.textBaseline = "middle";
-          ctx.textAlign = "center";
-          ctx.translate(markWidth / 2, markHeight / 2);
-          ctx.rotate(Math.PI / 180 * Number(props.rotate));
-          const markSize = Number(props.fontSize) * ratio;
-          ctx.font = `${props.fontStyle} normal ${props.fontWeight} ${markSize}px/${markHeight}px ${props.fontFamily}`;
-          ctx.fillStyle = props.fontColor;
-          if (Array.isArray(props.content)) {
-            props.content.map((item, index) => {
-              ctx.fillText(item, 0, (index - 1) * markSize);
-            });
-          } else {
-            ctx.fillText(props.content, 0, 0);
-          }
-          ctx.restore();
-          base64Url.value = canvas.toDataURL();
+          dealWithText(ctx, ratio, canvas, markWidth, markHeight);
         }
       } else {
         throw new Error("当前环境不支持Canvas");
       }
     };
+    const dealWithImage = (ctx, img, ratio, canvas, markWidth, markHeight) => {
+      ctx.translate(markWidth / 2, markHeight / 2);
+      ctx.rotate(Math.PI / 180 * Number(props.rotate));
+      img.crossOrigin = "anonymous";
+      img.referrerPolicy = "no-referrer";
+      img.src = props.image || "";
+      img.onload = () => {
+        ctx.drawImage(
+          img,
+          -props.imageWidth * ratio / 2,
+          -props.imageHeight * ratio / 2,
+          props.imageWidth * ratio,
+          props.imageHeight * ratio
+        );
+        ctx.restore();
+        base64Url.value = canvas.toDataURL();
+      };
+    };
+    const dealWithText = (ctx, ratio, canvas, markWidth, markHeight) => {
+      ctx.textBaseline = "middle";
+      ctx.textAlign = "center";
+      ctx.translate(markWidth / 2, markHeight / 2);
+      ctx.rotate(Math.PI / 180 * Number(props.rotate));
+      const markSize = Number(props.fontSize) * ratio;
+      ctx.font = `${props.fontStyle} normal ${props.fontWeight} ${markSize}px/${markHeight}px ${props.fontFamily}`;
+      ctx.fillStyle = props.fontColor;
+      if (Array.isArray(props.content)) {
+        props.content.map((item, index) => {
+          ctx.fillText(item, 0, (index - 1) * markSize);
+        });
+      } else {
+        ctx.fillText(props.content, 0, 0);
+      }
+      ctx.restore();
+      base64Url.value = canvas.toDataURL();
+    };
     watchEffect(() => {
-      init();
+      if (Taro.getEnv() === "WEB") {
+        initH5();
+      } else {
+        init();
+      }
     });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("view", {