@nutui/nutui 3.1.22 → 3.1.23-beta.2

package/dist/packages/_es/Video.js

@@ -1,81 +1,339 @@
 /*!
-* @nutui/nutui v3.1.22 Fri Jun 24 2022 18:11:16 GMT+0800 (中国标准时间)
+* @nutui/nutui v3.1.23-beta.2 Thu Jul 07 2022 19:06:52 GMT+0800 (中国标准时间)
 * (c) 2022 @jdf2e.
 * Released under the MIT License.
 */
-import { reactive as e, ref as o, computed as t, watch as l, nextTick as s, onMounted as r, toRefs as i, openBlock as a, createElementBlock as d, createElementVNode as n, createCommentVNode as p, withDirectives as u, vShow as c, normalizeClass as v, toDisplayString as m, normalizeStyle as y, withModifiers as E } from "vue";
-import { c as g } from "./component.js";
-import { _ as h } from "./plugin-vue_export-helper.js";
+import { reactive, ref, computed, watch, nextTick, onMounted, toRefs, openBlock, createElementBlock, createElementVNode, createCommentVNode, withDirectives, vShow, normalizeClass, toDisplayString, normalizeStyle, withModifiers } from "vue";
+import { c as createComponent } from "./component.js";
+import { _ as _export_sfc } from "./plugin-vue_export-helper.js";
 import "../locale/lang";
-const { create: S, translate: f } = g("video"), b = S({ props: { source: { type: Object, default: {} }, options: { type: Object, default: { autoplay: false, volume: 0.5, poster: "", loop: false, controls: true, muted: false, disabled: false, playsinline: false, touchPlay: false, preload: "" }, required: true }, model: { type: String, default: "" } }, components: {}, emits: ["click", "play", "pause", "playend"], setup(a2, { emit: d2 }) {
-  const n2 = e({ videoElm: null, initial: true, showToolbox: false, player: { $player: null, pos: null }, progressBar: { progressElm: null, pos: null }, videoSet: { loaded: 0, displayTime: "00:00", totalTime: "00:00", progress: { width: 0, current: 0 } }, state: { controlShow: true, vol: 0.5, currentTime: 0, fullScreen: false, playing: false, isLoading: false, isEnd: false, isError: false, isMuted: false }, showTouchMask: false }), p2 = o(null), u2 = t(() => a2.options.disabled);
-  l(() => a2.source, (e2) => {
-    e2.src && s(() => {
-      n2.videoElm.load();
+const { create, translate } = createComponent("video");
+const _sfc_main = create({
+  props: {
+    source: {
+      type: Object,
+      default: {}
+    },
+    options: {
+      type: Object,
+      default: {
+        autoplay: false,
+        volume: 0.5,
+        poster: "",
+        loop: false,
+        controls: true,
+        muted: false,
+        disabled: false,
+        playsinline: false,
+        touchPlay: false,
+        preload: ""
+      },
+      required: true
+    },
+    model: {
+      type: String,
+      default: ""
+    }
+  },
+  components: {},
+  emits: ["click", "play", "pause", "playend"],
+  setup(props, { emit }) {
+    const state = reactive({
+      videoElm: null,
+      initial: true,
+      showToolbox: false,
+      player: {
+        $player: null,
+        pos: null
+      },
+      progressBar: {
+        progressElm: null,
+        pos: null
+      },
+      videoSet: {
+        loaded: 0,
+        displayTime: "00:00",
+        totalTime: "00:00",
+        progress: {
+          width: 0,
+          current: 0
+        }
+      },
+      state: {
+        controlShow: true,
+        vol: 0.5,
+        currentTime: 0,
+        fullScreen: false,
+        playing: false,
+        isLoading: false,
+        isEnd: false,
+        isError: false,
+        isMuted: false
+      },
+      showTouchMask: false
+    });
+    const root = ref(null);
+    const isDisabled = computed(() => {
+      return props.options.disabled;
     });
-  }), l(() => a2.options, (e2) => {
-    n2.state.isMuted = !!e2 && e2.muted;
-  }, { immediate: true });
-  const c2 = () => {
-    n2.videoElm = p2.value, a2.options.autoplay && setTimeout(() => {
-      n2.videoElm.play();
-    }, 200), a2.options.touchPlay && (n2.showTouchMask = true), a2.options.playsinline && (n2.videoElm.setAttribute("playsinline", a2.options.playsinline), n2.videoElm.setAttribute("webkit-playsinline", a2.options.playsinline), n2.videoElm.setAttribute("x5-video-player-type", "h5-page"), n2.videoElm.setAttribute("x5-video-player-fullscreen", false)), g2(), n2.showToolbox ? v2() : (n2.videoElm.addEventListener("play", () => {
-      n2.state.playing = true, d2("play", n2.videoElm);
-    }), n2.videoElm.addEventListener("pause", () => {
-      n2.state.playing = false, d2("pause", n2.videoElm);
-    }), n2.videoElm.addEventListener("ended", y2));
-  }, v2 = () => {
-    const e2 = p2.value, o2 = p2.value.getElementsByClassName("progress")[0];
-    n2.player.$player = e2, n2.progressBar.progressElm = o2, n2.progressBar.pos = o2.getBoundingClientRect(), n2.videoSet.progress.width = Math.round(o2.getBoundingClientRect().width);
-  }, m2 = () => {
-    n2.videoSet.loaded && (n2.videoSet.loaded = n2.videoElm.buffered.end(0) / n2.videoElm.duration * 100);
-  }, y2 = () => {
-    n2.state.playing = false, n2.state.isEnd = true, n2.videoSet.displayTime = "00:00", n2.videoSet.progress.current = 0, n2.videoElm.currentTime = 0, d2("playend", n2.videoElm);
-  }, E2 = () => {
-    n2.state.isError = true;
-  }, g2 = () => {
-    n2.state.vol = a2.options.volume;
-  }, h2 = (e2, o2) => {
-    n2.videoElm.currentTime = Math.floor(e2 * o2);
-  };
-  return r(() => {
-    c2();
-  }), { root: p2, ...i(a2), ...i(n2), handleError: E2, isDisabled: u2, play: () => {
-    if (a2.options.autoplay && a2.options.disabled)
-      return n2.state.playing = true, false;
-    if (n2.state.playing = !n2.state.playing, n2.videoElm)
-      if (n2.state.playing)
-        try {
-          setTimeout(() => {
-            n2.videoElm.play();
-          }, 200), n2.videoElm.addEventListener("progress", () => {
-            m2();
-          }), n2.videoElm.addEventListener("ended", y2), d2("play", n2.videoElm);
-        } catch (e2) {
-          E2();
+    watch(() => props.source, (newValue) => {
+      if (newValue.src) {
+        nextTick(() => {
+          state.videoElm.load();
+        });
+      }
+    });
+    watch(() => props.options, (newValue) => {
+      state.state.isMuted = newValue ? newValue.muted : false;
+    }, { immediate: true });
+    const init = () => {
+      state.videoElm = root.value;
+      if (props.options.autoplay) {
+        setTimeout(() => {
+          state.videoElm.play();
+        }, 200);
+      }
+      if (props.options.touchPlay) {
+        state.showTouchMask = true;
+      }
+      if (props.options.playsinline) {
+        state.videoElm.setAttribute("playsinline", props.options.playsinline);
+        state.videoElm.setAttribute("webkit-playsinline", props.options.playsinline);
+        state.videoElm.setAttribute("x5-video-player-type", "h5-page");
+        state.videoElm.setAttribute("x5-video-player-fullscreen", false);
+      }
+      volumeHandle();
+      if (state.showToolbox) {
+        customerInit();
+      } else {
+        state.videoElm.addEventListener("play", () => {
+          state.state.playing = true;
+          emit("play", state.videoElm);
+        });
+        state.videoElm.addEventListener("pause", () => {
+          state.state.playing = false;
+          emit("pause", state.videoElm);
+        });
+        state.videoElm.addEventListener("ended", playEnded);
+      }
+    };
+    const customerInit = () => {
+      const $player = root.value;
+      const $progress = root.value.getElementsByClassName("progress")[0];
+      state.player.$player = $player;
+      state.progressBar.progressElm = $progress;
+      state.progressBar.pos = $progress.getBoundingClientRect();
+      state.videoSet.progress.width = Math.round($progress.getBoundingClientRect().width);
+    };
+    const play = () => {
+      if (props.options.autoplay && props.options.disabled) {
+        state.state.playing = true;
+        return false;
+      }
+      state.state.playing = !state.state.playing;
+      if (state.videoElm) {
+        if (state.state.playing) {
+          try {
+            setTimeout(() => {
+              state.videoElm.play();
+            }, 200);
+            state.videoElm.addEventListener("progress", () => {
+              getLoadTime();
+            });
+            state.videoElm.addEventListener("ended", playEnded);
+            emit("play", state.videoElm);
+          } catch (e) {
+            handleError();
+          }
+        } else {
+          state.videoElm.pause();
+          emit("pause", state.videoElm);
         }
-      else
-        n2.videoElm.pause(), d2("pause", n2.videoElm);
-  }, handleMuted: () => {
-    n2.state.isMuted = !n2.state.isMuted, n2.videoElm.muted = n2.state.isMuted;
-  }, touchSlidSrart: () => {
-  }, touchSlidMove: (e2) => {
-    let o2 = e2.targetTouches[0].pageX - n2.progressBar.pos.left;
-    o2 <= 0 && (o2 = 0), o2 >= n2.videoSet.progress.width && (o2 = n2.videoSet.progress.width), n2.videoSet.progress.current = o2;
-    let t2 = n2.videoSet.progress.current / n2.videoSet.progress.width;
-    n2.videoElm.duration && h2(t2, n2.videoElm.duration);
-  }, touchSlidEnd: (e2) => {
-    let o2 = e2.changedTouches[0].pageX - n2.progressBar.pos.left;
-    n2.videoSet.progress.current = o2;
-    let t2 = o2 / n2.videoSet.progress.width;
-    n2.videoElm.duration && h2(t2, n2.videoElm.duration);
-  }, retry: () => {
-    n2.state.isError = false, c2();
-  }, fullScreen: () => {
-    n2.state.fullScreen ? (n2.state.fullScreen = false, document.webkitCancelFullScreen()) : (n2.state.fullScreen = true, n2.videoElm.webkitRequestFullScreen());
-  }, translate: f };
-} }), T = { class: "nut-video", ref: "videocon" }, w = ["muted", "autoplay", "loop", "poster", "controls", "preload"], k = ["src", "type"], M = { class: "current-time" }, B = { class: "progress-container" }, x = { class: "progress", ref: "progressBar" }, C = [n("div", { class: "move-handle" }, null, -1)], L = { class: "played", ref: "playedBar" }, j = { class: "duration-time" }, A = { class: "nut-video-error" }, D = { class: "lose" };
-var R = h(b, [["render", function(e2, o2, t2, l2, s2, r2) {
-  return a(), d("div", T, [n("video", { ref: "root", class: "nut-video-player", muted: e2.options.muted, autoplay: e2.options.autoplay, loop: e2.options.loop, poster: e2.options.poster, controls: e2.options.controls, preload: e2.options.preload, onError: o2[0] || (o2[0] = (...o3) => e2.handleError && e2.handleError(...o3)) }, [n("source", { src: e2.source.src, type: e2.source.type }, null, 8, k)], 40, w), e2.showToolbox && !e2.isDisabled ? (a(), d("div", { key: 0, class: "playing-mask", ref: "touchMask", onClick: o2[1] || (o2[1] = (...o3) => e2.play && e2.play(...o3)) }, null, 512)) : p("", true), e2.showToolbox && !e2.isDisabled ? u((a(), d("div", { key: 1, class: "nut-video-play-btn", ref: "palyBtn", onClick: o2[2] || (o2[2] = (...o3) => e2.play && e2.play(...o3)) }, null, 512)), [[c, !e2.state.playing]]) : p("", true), u(n("div", { class: v(["nut-video-controller", { "show-control": !e2.state.playing, "hide-control": e2.state.playing }]) }, [n("div", { class: "control-play-btn", onClick: o2[3] || (o2[3] = (...o3) => e2.play && e2.play(...o3)) }), n("div", M, m(e2.videoSet.displayTime), 1), n("div", B, [n("div", x, [n("div", { class: "buffered", style: y({ width: `${e2.videoSet.loaded}%` }) }, null, 4), n("div", { class: "video-ball", style: y({ transform: `translate3d(${e2.videoSet.progress.current}px, -50%, 0)` }), onTouchmove: o2[4] || (o2[4] = E((o3) => e2.touchSlidMove(o3), ["stop", "prevent"])), onTouchstart: o2[5] || (o2[5] = E((o3) => e2.touchSlidSrart(o3), ["stop"])), onTouchend: o2[6] || (o2[6] = E((o3) => e2.touchSlidEnd(o3), ["stop"])) }, C, 36), n("div", L, null, 512)], 512)]), n("div", j, m(e2.videoSet.totalTime), 1), n("div", { class: v(["volume", { muted: e2.state.isMuted }]), onClick: o2[7] || (o2[7] = (...o3) => e2.handleMuted && e2.handleMuted(...o3)) }, null, 2), n("div", { class: "fullscreen-icon", onClick: o2[8] || (o2[8] = (...o3) => e2.fullScreen && e2.fullScreen(...o3)) })], 2), [[c, e2.showToolbox && !e2.isDisabled]]), u(n("div", A, [n("p", D, m(e2.translate("errorTip")), 1), n("p", { class: "retry", onClick: o2[9] || (o2[9] = (...o3) => e2.retry && e2.retry(...o3)) }, m(e2.translate("clickRetry")), 1)], 512), [[c, e2.state.isError]])], 512);
-}]]);
-export { R as default };
+      }
+    };
+    const getLoadTime = () => {
+      if (state.videoSet.loaded)
+        state.videoSet.loaded = state.videoElm.buffered.end(0) / state.videoElm.duration * 100;
+    };
+    const playEnded = () => {
+      state.state.playing = false;
+      state.state.isEnd = true;
+      state.videoSet.displayTime = "00:00";
+      state.videoSet.progress.current = 0;
+      state.videoElm.currentTime = 0;
+      emit("playend", state.videoElm);
+    };
+    const handleError = () => {
+      state.state.isError = true;
+    };
+    const volumeHandle = () => {
+      state.state.vol = props.options.volume;
+    };
+    const handleMuted = () => {
+      state.state.isMuted = !state.state.isMuted;
+      state.videoElm.muted = state.state.isMuted;
+    };
+    const touchSlidSrart = () => {
+    };
+    const touchSlidMove = (e) => {
+      let currentX = e.targetTouches[0].pageX;
+      let offsetX = currentX - state.progressBar.pos.left;
+      if (offsetX <= 0) {
+        offsetX = 0;
+      }
+      if (offsetX >= state.videoSet.progress.width) {
+        offsetX = state.videoSet.progress.width;
+      }
+      state.videoSet.progress.current = offsetX;
+      let percent = state.videoSet.progress.current / state.videoSet.progress.width;
+      state.videoElm.duration && setPlayTime(percent, state.videoElm.duration);
+    };
+    const touchSlidEnd = (e) => {
+      let currentX = e.changedTouches[0].pageX;
+      let offsetX = currentX - state.progressBar.pos.left;
+      state.videoSet.progress.current = offsetX;
+      let percent = offsetX / state.videoSet.progress.width;
+      state.videoElm.duration && setPlayTime(percent, state.videoElm.duration);
+    };
+    const setPlayTime = (percent, totalTime) => {
+      state.videoElm.currentTime = Math.floor(percent * totalTime);
+    };
+    const retry = () => {
+      state.state.isError = false;
+      init();
+    };
+    const fullScreen = () => {
+      if (!state.state.fullScreen) {
+        state.state.fullScreen = true;
+        state.videoElm.webkitRequestFullScreen();
+      } else {
+        state.state.fullScreen = false;
+        document.webkitCancelFullScreen();
+      }
+    };
+    onMounted(() => {
+      init();
+    });
+    return {
+      root,
+      ...toRefs(props),
+      ...toRefs(state),
+      handleError,
+      isDisabled,
+      play,
+      handleMuted,
+      touchSlidSrart,
+      touchSlidMove,
+      touchSlidEnd,
+      retry,
+      fullScreen,
+      translate
+    };
+  }
+});
+const _hoisted_1 = {
+  class: "nut-video",
+  ref: "videocon"
+};
+const _hoisted_2 = ["muted", "autoplay", "loop", "poster", "controls", "preload"];
+const _hoisted_3 = ["src", "type"];
+const _hoisted_4 = { class: "current-time" };
+const _hoisted_5 = { class: "progress-container" };
+const _hoisted_6 = {
+  class: "progress",
+  ref: "progressBar"
+};
+const _hoisted_7 = /* @__PURE__ */ createElementVNode("div", { class: "move-handle" }, null, -1);
+const _hoisted_8 = [
+  _hoisted_7
+];
+const _hoisted_9 = {
+  class: "played",
+  ref: "playedBar"
+};
+const _hoisted_10 = { class: "duration-time" };
+const _hoisted_11 = { class: "nut-video-error" };
+const _hoisted_12 = { class: "lose" };
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("div", _hoisted_1, [
+    createElementVNode("video", {
+      ref: "root",
+      class: "nut-video-player",
+      muted: _ctx.options.muted,
+      autoplay: _ctx.options.autoplay,
+      loop: _ctx.options.loop,
+      poster: _ctx.options.poster,
+      controls: _ctx.options.controls,
+      preload: _ctx.options.preload,
+      onError: _cache[0] || (_cache[0] = (...args) => _ctx.handleError && _ctx.handleError(...args))
+    }, [
+      createElementVNode("source", {
+        src: _ctx.source.src,
+        type: _ctx.source.type
+      }, null, 8, _hoisted_3)
+    ], 40, _hoisted_2),
+    _ctx.showToolbox && !_ctx.isDisabled ? (openBlock(), createElementBlock("div", {
+      key: 0,
+      class: "playing-mask",
+      ref: "touchMask",
+      onClick: _cache[1] || (_cache[1] = (...args) => _ctx.play && _ctx.play(...args))
+    }, null, 512)) : createCommentVNode("", true),
+    _ctx.showToolbox && !_ctx.isDisabled ? withDirectives((openBlock(), createElementBlock("div", {
+      key: 1,
+      class: "nut-video-play-btn",
+      ref: "palyBtn",
+      onClick: _cache[2] || (_cache[2] = (...args) => _ctx.play && _ctx.play(...args))
+    }, null, 512)), [
+      [vShow, !_ctx.state.playing]
+    ]) : createCommentVNode("", true),
+    withDirectives(createElementVNode("div", {
+      class: normalizeClass(["nut-video-controller", { "show-control": !_ctx.state.playing, "hide-control": _ctx.state.playing }])
+    }, [
+      createElementVNode("div", {
+        class: "control-play-btn",
+        onClick: _cache[3] || (_cache[3] = (...args) => _ctx.play && _ctx.play(...args))
+      }),
+      createElementVNode("div", _hoisted_4, toDisplayString(_ctx.videoSet.displayTime), 1),
+      createElementVNode("div", _hoisted_5, [
+        createElementVNode("div", _hoisted_6, [
+          createElementVNode("div", {
+            class: "buffered",
+            style: normalizeStyle({ width: `${_ctx.videoSet.loaded}%` })
+          }, null, 4),
+          createElementVNode("div", {
+            class: "video-ball",
+            style: normalizeStyle({
+              transform: `translate3d(${_ctx.videoSet.progress.current}px, -50%, 0)`
+            }),
+            onTouchmove: _cache[4] || (_cache[4] = withModifiers(($event) => _ctx.touchSlidMove($event), ["stop", "prevent"])),
+            onTouchstart: _cache[5] || (_cache[5] = withModifiers(($event) => _ctx.touchSlidSrart($event), ["stop"])),
+            onTouchend: _cache[6] || (_cache[6] = withModifiers(($event) => _ctx.touchSlidEnd($event), ["stop"]))
+          }, _hoisted_8, 36),
+          createElementVNode("div", _hoisted_9, null, 512)
+        ], 512)
+      ]),
+      createElementVNode("div", _hoisted_10, toDisplayString(_ctx.videoSet.totalTime), 1),
+      createElementVNode("div", {
+        class: normalizeClass(["volume", { muted: _ctx.state.isMuted }]),
+        onClick: _cache[7] || (_cache[7] = (...args) => _ctx.handleMuted && _ctx.handleMuted(...args))
+      }, null, 2),
+      createElementVNode("div", {
+        class: "fullscreen-icon",
+        onClick: _cache[8] || (_cache[8] = (...args) => _ctx.fullScreen && _ctx.fullScreen(...args))
+      })
+    ], 2), [
+      [vShow, _ctx.showToolbox && !_ctx.isDisabled]
+    ]),
+    withDirectives(createElementVNode("div", _hoisted_11, [
+      createElementVNode("p", _hoisted_12, toDisplayString(_ctx.translate("errorTip")), 1),
+      createElementVNode("p", {
+        class: "retry",
+        onClick: _cache[9] || (_cache[9] = (...args) => _ctx.retry && _ctx.retry(...args))
+      }, toDisplayString(_ctx.translate("clickRetry")), 1)
+    ], 512), [
+      [vShow, _ctx.state.isError]
+    ])
+  ], 512);
+}
+var Video = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+export { Video as default };

package/dist/packages/_es/WaterMark.js

@@ -0,0 +1,187 @@
+/*!
+* @nutui/nutui v3.1.23-beta.2 Thu Jul 07 2022 19:06:52 GMT+0800 (中国标准时间)
+* (c) 2022 @jdf2e.
+* Released under the MIT License.
+*/
+import { reactive, watch, computed, toRefs, openBlock, createElementBlock, normalizeClass, normalizeStyle } from "vue";
+import { c as createComponent } from "./component.js";
+import { _ as _export_sfc } from "./plugin-vue_export-helper.js";
+import "../locale/lang";
+const { componentName, create } = createComponent("watermark");
+const _sfc_main = create({
+  props: {
+    name: {
+      type: String,
+      default: ""
+    },
+    gapY: {
+      type: Number,
+      default: 48
+    },
+    gapX: {
+      type: Number,
+      default: 24
+    },
+    zIndex: {
+      type: Number,
+      default: 2e3
+    },
+    width: {
+      type: Number,
+      default: 120
+    },
+    height: {
+      type: Number,
+      default: 64
+    },
+    rotate: {
+      type: Number,
+      default: -22
+    },
+    image: {
+      type: String,
+      default: ""
+    },
+    imageWidth: {
+      type: Number,
+      default: 120
+    },
+    imageHeight: {
+      type: Number,
+      default: 64
+    },
+    content: {
+      type: String,
+      default: ""
+    },
+    fontColor: {
+      type: String,
+      default: "rgba(0,0,0,.15)"
+    },
+    fontStyle: {
+      type: String,
+      default: "normal"
+    },
+    fontFamily: {
+      type: String,
+      default: "PingFang SC"
+    },
+    fontWeight: {
+      type: String,
+      default: "normal"
+    },
+    fontSize: {
+      type: [String, Number],
+      default: 14
+    },
+    fullPage: {
+      type: Boolean,
+      default: ""
+    }
+  },
+  emits: ["click"],
+  setup(props, { emit }) {
+    const state = reactive({
+      base64Url: ""
+    });
+    const {
+      zIndex,
+      gapX,
+      gapY,
+      width,
+      height,
+      rotate,
+      image,
+      imageWidth,
+      imageHeight,
+      content,
+      fontStyle,
+      fontWeight,
+      fontColor,
+      fontSize,
+      fontFamily
+    } = props;
+    const init = () => {
+      const canvas = document.createElement("canvas");
+      const ratio = window.devicePixelRatio;
+      console.log(ratio);
+      const ctx = canvas.getContext("2d");
+      const canvasWidth = `${(gapX + width) * ratio}px`;
+      const canvasHeight = `${(gapY + height) * ratio}px`;
+      const markWidth = width * ratio;
+      const markHeight = height * ratio;
+      canvas.setAttribute("width", canvasWidth);
+      canvas.setAttribute("height", canvasHeight);
+      if (ctx) {
+        if (image) {
+          ctx.translate(markWidth / 2, markHeight / 2);
+          ctx.rotate(Math.PI / 180 * Number(rotate));
+          const img = new Image();
+          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();
+            state.base64Url = canvas.toDataURL();
+            console.log(state.base64Url);
+          };
+        } 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 = fontColor;
+          ctx.fillText(content, 0, 0);
+          ctx.restore();
+          state.base64Url = canvas.toDataURL();
+          console.log(state.base64Url);
+        }
+      } else {
+        throw new Error("\u5F53\u524D\u73AF\u5883\u4E0D\u652F\u6301Canvas");
+      }
+    };
+    init();
+    watch(() => [
+      zIndex,
+      gapX,
+      gapY,
+      width,
+      height,
+      rotate,
+      image,
+      imageWidth,
+      imageHeight,
+      content,
+      fontStyle,
+      fontWeight,
+      fontColor,
+      fontSize,
+      fontFamily
+    ], () => {
+      init();
+    });
+    const classes = computed(() => {
+      const prefixCls = componentName;
+      return {
+        [prefixCls]: true,
+        [`${prefixCls}-full-page`]: props.fullPage
+      };
+    });
+    return { ...toRefs(state), classes };
+  }
+});
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("view", {
+    class: normalizeClass(_ctx.classes),
+    style: normalizeStyle({
+      zIndex: _ctx.zIndex,
+      backgroundSize: `${_ctx.gapX + _ctx.width}px`,
+      backgroundImage: `url('${_ctx.base64Url}')`
+    })
+  }, null, 6);
+}
+var index = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+export { index as default };