@cmstops/pro-compo 0.1.14 → 0.1.15

package/es/imageCrop/component.js

@@ -0,0 +1,472 @@
+import { defineComponent, ref, watch, resolveDirective, openBlock, createBlock, unref, withCtx, createTextVNode, toDisplayString, createElementVNode, createVNode, withDirectives, vShow, createElementBlock, normalizeClass, createCommentVNode, Fragment, renderList } from "vue";
+import { Modal, Tooltip, Button, Space } from "@arco-design/web-vue";
+import { IconZoomIn, IconZoomOut, IconRotateLeft, IconRotateRight, IconSync } from "@arco-design/web-vue/es/icon";
+import Cropper from "cropperjs";
+import ColorThief from "colorthief";
+import { GifToCanvas } from "gif-to-canvas";
+import GIF from "gif.js/dist/gif";
+import { uploadByTUS } from "../utils/tusUpload.js";
+import { DEFAULT_BASE_API } from "../config.js";
+import { replaceSuffix } from "../utils/index.js";
+import { getFileRealUrl } from "./script/api.js";
+import { useGenerateAssets } from "../hooks/assets.js";
+const _hoisted_1 = { class: "image-cropper" };
+const _hoisted_2 = { class: "edit-cropper" };
+const _hoisted_3 = ["src"];
+const _hoisted_4 = {
+  key: 0,
+  class: "tool"
+};
+const _hoisted_5 = ["onClick"];
+const _hoisted_6 = {
+  key: 1,
+  class: "tool"
+};
+const _hoisted_7 = ["onClick"];
+const _hoisted_8 = { class: "image-crop-modal-footer" };
+const _hoisted_9 = { class: "left" };
+const _hoisted_10 = { class: "right" };
+const _sfc_main = defineComponent({
+  __name: "component",
+  props: {
+    BASE_API: {},
+    visible: { type: Boolean },
+    aspectRatioProp: {},
+    corpData: {},
+    userInfo: {},
+    generateAssets: { type: Boolean }
+  },
+  emits: ["update:visible", "confirm"],
+  setup(__props, { emit }) {
+    const props = __props;
+    const BASE_API = props.BASE_API || DEFAULT_BASE_API;
+    const saveLoading = ref(false);
+    const editImage = ref("");
+    const setVisible = (bool) => {
+      emit("update:visible", bool);
+    };
+    const cancelDialog = () => {
+      setVisible(false);
+    };
+    const croppering = ref(true);
+    const aspectRatioList = [
+      { label: "\u81EA\u7531", value: null },
+      { label: "1:1", value: 1 / 1 },
+      { label: "4:3", value: 4 / 3 },
+      { label: "3:4", value: 3 / 4 },
+      { label: "16:9", value: 16 / 9 },
+      { label: "9:16", value: 9 / 16 }
+    ];
+    const customizedAspectRatioList = ref([]);
+    const aspectRatioActive = ref(null);
+    const mosaicObj = ref(null);
+    const cropperIndex = ref(0);
+    const selectedData = ref([]);
+    const loadImage = () => {
+    };
+    const getBase64 = (imgUrl) => {
+      window.URL = window.URL || window.webkitURL;
+      const xhr = new XMLHttpRequest();
+      xhr.open("get", imgUrl, true);
+      xhr.responseType = "blob";
+      xhr.send();
+      xhr.onload = function() {
+        if (xhr.status === 200) {
+          const blob = xhr.response;
+          const oFileReader = new FileReader();
+          oFileReader.onloadend = (e) => {
+            const base64 = e.target.result;
+            editImage.value = base64;
+            setTimeout(() => {
+              if (props.aspectRatioProp) {
+                if (Array.isArray(props.aspectRatioProp)) {
+                  cropper(props.aspectRatioProp[0], 0);
+                } else {
+                  cropper(props.aspectRatioProp, null);
+                }
+              }
+            }, 300);
+          };
+          oFileReader.onerror = (e) => {
+          };
+          oFileReader.readAsDataURL(blob);
+        }
+      };
+    };
+    const cropper = (aspectRatio, index) => {
+      const image = document.getElementById("cropper_img");
+      aspectRatioActive.value = index;
+      cropperDestroy();
+      mosaicObj.value = new Cropper(image, {
+        crop() {
+          croppering.value = false;
+        },
+        initialAspectRatio: aspectRatio,
+        aspectRatio,
+        touchDragZoom: false,
+        autoCropArea: 1,
+        rotatable: true,
+        strict: false,
+        guides: false
+      });
+    };
+    const cropperZoom = (ratio) => {
+      mosaicObj.value.zoom(ratio);
+    };
+    const cropperRotate = (degree) => {
+      mosaicObj.value.rotate(degree);
+    };
+    const cropperReset = () => {
+      mosaicObj.value.reset();
+    };
+    const cropperDestroy = () => {
+      mosaicObj.value && mosaicObj.value.destroy();
+    };
+    const dataURLtoBlob = (dataurl) => {
+      const arr = dataurl.split(",");
+      const mime = arr[0].match(/:(.*?);/)[1];
+      const bstr = atob(arr[1]);
+      let n = bstr.length;
+      const u8arr = new Uint8Array(n);
+      while (n--) {
+        u8arr[n] = bstr.charCodeAt(n);
+      }
+      return new Blob([u8arr], { type: mime });
+    };
+    const save = () => {
+      saveLoading.value = true;
+      if (mosaicObj.value) {
+        if (mosaicObj.value.url.includes("data:image/gif")) {
+          const url = URL.createObjectURL(dataURLtoBlob(mosaicObj.value.url));
+          const cropBoxData = mosaicObj.value.getCropBoxData();
+          const canvasData = mosaicObj.value.getCanvasData();
+          const gifToCanvas = new GifToCanvas(url, {
+            targetOffset: {
+              dx: cropBoxData.left - canvasData.left,
+              dy: cropBoxData.top - canvasData.top,
+              width: canvasData.width,
+              height: canvasData.height,
+              sWidth: cropBoxData.width,
+              sHeight: cropBoxData.height
+            }
+          });
+          gifToCanvas.init();
+          let gifWorker = "";
+          if (window.location.href.includes("localhost")) {
+            gifWorker = "./gif.worker.js";
+          } else {
+            gifWorker = `${BASE_API}/static/js/gif.worker.js`;
+          }
+          const gifObj = new GIF({
+            workers: 4,
+            quality: 10,
+            width: cropBoxData.width,
+            height: cropBoxData.height,
+            workerScript: gifWorker
+          });
+          const addFrame = (canvas, delay) => {
+            gifObj.addFrame(canvas, { copy: true, delay });
+          };
+          gifToCanvas.on("progress", (canvas, delay) => {
+            addFrame(canvas, delay);
+          });
+          gifToCanvas.on("finished", (canvas, delay) => {
+            addFrame(canvas, delay);
+            gifObj.render();
+          });
+          gifObj.on("finished", function(blob) {
+            handleUploadCropData(blob, "gif");
+          });
+        } else {
+          const CroppedCanvas = mosaicObj.value.getCroppedCanvas({});
+          CroppedCanvas.toBlob(
+            async (blob) => {
+              handleUploadCropData(blob, "png");
+            },
+            "image/jpeg",
+            0.75
+          );
+        }
+      } else {
+        saveLoading.value = false;
+        if (selectedData.value.length === cropperIndex.value + 1) {
+          emit("confirm", JSON.parse(JSON.stringify(selectedData.value)));
+          cancelDialog();
+        } else {
+          cropperIndex.value += 1;
+          cropperDestroy();
+          getMediaRealUrl();
+        }
+      }
+    };
+    const getUploadFileUrl = (file) => {
+      const pattern = /\+.*$/;
+      const result = file.url.replace(pattern, "").replace("upload", "static");
+      return { url: result, size: file.size || file.file.size };
+    };
+    const handleUploadCropData = async (blob, fileType) => {
+      const themeColors = getThemeColor();
+      const name = `\u88C1\u5207\u526F\u672C${new Date().getTime()}.${fileType}`;
+      const file = new File([blob], name, { type: blob.type });
+      const result = await uploadByTUS(file);
+      const resImg = getUploadFileUrl(result);
+      if (!props.generateAssets) {
+        afterCropperAndUploadFile({
+          url: resImg.url,
+          banner_theme_color: themeColors
+        });
+        return;
+      }
+      if (props.userInfo) {
+        const param = {
+          url: resImg.url,
+          size: resImg.size,
+          alias: replaceSuffix(
+            selectedData.value[cropperIndex.value].alias,
+            "\u88C1\u5207\u526F\u672C"
+          ),
+          repository_id: props.userInfo.repository_id,
+          directory_id: selectedData.value[cropperIndex.value].directory_id,
+          banner_theme_color: themeColors
+        };
+        useGenerateAssets(BASE_API, param).then((response) => {
+          response.message.banner_theme_color = themeColors;
+          afterCropperAndUploadFile(response.message);
+        });
+      }
+    };
+    const afterCropperAndUploadFile = (data) => {
+      selectedData.value[cropperIndex.value] = { ...data };
+      saveLoading.value = false;
+      if (selectedData.value.length === cropperIndex.value + 1) {
+        emit("confirm", JSON.parse(JSON.stringify(selectedData.value)));
+        cancelDialog();
+      } else {
+        cropperIndex.value += 1;
+        cropperDestroy();
+        getMediaRealUrl();
+      }
+    };
+    const getThemeColor = () => {
+      const colorThief = new ColorThief();
+      const img = document.getElementById("cropper_img");
+      let themeColors = [];
+      const Palette = colorThief.getPalette(img);
+      if (Palette) {
+        themeColors = Palette.slice(0, 8);
+      } else {
+        themeColors = [[255, 255, 255]];
+      }
+      return themeColors;
+    };
+    const getMediaRealUrl = () => {
+      const item = selectedData.value[cropperIndex.value];
+      const flag = !item.url.includes("/poplar/v2");
+      const cape = item.url.includes("cape/v1/upload");
+      croppering.value = true;
+      getBase64(item.url);
+      if (item.realUrl && flag || cape) {
+        getBase64(item.url);
+      } else {
+        getFileRealUrl(BASE_API, item.url).then((res) => {
+          getBase64(res.message);
+        });
+      }
+    };
+    watch(
+      () => props.visible,
+      (newVal) => {
+        if (newVal) {
+          init();
+        }
+      }
+    );
+    const init = () => {
+      cropperIndex.value = 0;
+      selectedData.value = props.corpData;
+      if (props.aspectRatioProp && Array.isArray(props.aspectRatioProp)) {
+        const aspectRatioLists = aspectRatioList.map((item) => {
+          item.buttonIndex = cropperIndex.value++;
+          return item;
+        }).filter((item) => {
+          return props.aspectRatioProp.includes(item.value);
+        });
+        if (aspectRatioLists.length) {
+          customizedAspectRatioList.value = aspectRatioLists;
+        }
+      }
+      getMediaRealUrl();
+    };
+    return (_ctx, _cache) => {
+      const _directive_loading = resolveDirective("loading");
+      return openBlock(), createBlock(unref(Modal), {
+        visible: _ctx.visible,
+        width: "986px",
+        "mask-closable": false,
+        "title-align": "center",
+        "unmount-on-close": "",
+        "modal-class": "image-crop-modal-wrapper",
+        "body-class": "image-crop-modal-body"
+      }, {
+        title: withCtx(() => [
+          createTextVNode(toDisplayString(_ctx.aspectRatioProp ? "\u88C1\u526A\u56FE\u7247" : "\u8BF7\u9009\u62E9\u88C1\u526A\u6BD4\u4F8B"), 1)
+        ]),
+        footer: withCtx(() => [
+          createElementVNode("span", _hoisted_8, [
+            createElementVNode("div", _hoisted_9, [
+              createVNode(unref(Tooltip), { content: "\u653E\u5927" }, {
+                default: withCtx(() => [
+                  createVNode(unref(Button), {
+                    class: "cropper-btn",
+                    shape: "circle",
+                    onClick: _cache[0] || (_cache[0] = ($event) => cropperZoom(0.1))
+                  }, {
+                    default: withCtx(() => [
+                      createVNode(unref(IconZoomIn))
+                    ]),
+                    _: 1
+                  })
+                ]),
+                _: 1
+              }),
+              createVNode(unref(Tooltip), { content: "\u7F29\u5C0F" }, {
+                default: withCtx(() => [
+                  createVNode(unref(Button), {
+                    class: "cropper-btn",
+                    shape: "circle",
+                    onClick: _cache[1] || (_cache[1] = ($event) => cropperZoom(-0.1))
+                  }, {
+                    default: withCtx(() => [
+                      createVNode(unref(IconZoomOut))
+                    ]),
+                    _: 1
+                  })
+                ]),
+                _: 1
+              }),
+              createVNode(unref(Tooltip), { content: "\u5411\u5DE6\u65CB\u8F6C45\u5EA6" }, {
+                default: withCtx(() => [
+                  createVNode(unref(Button), {
+                    class: "cropper-btn",
+                    shape: "circle",
+                    onClick: _cache[2] || (_cache[2] = ($event) => cropperRotate(-45))
+                  }, {
+                    default: withCtx(() => [
+                      createVNode(unref(IconRotateLeft))
+                    ]),
+                    _: 1
+                  })
+                ]),
+                _: 1
+              }),
+              createVNode(unref(Tooltip), { content: "\u5411\u53F3\u65CB\u8F6C45\u5EA6" }, {
+                default: withCtx(() => [
+                  createVNode(unref(Button), {
+                    class: "cropper-btn",
+                    shape: "circle",
+                    onClick: _cache[3] || (_cache[3] = ($event) => cropperRotate(45))
+                  }, {
+                    default: withCtx(() => [
+                      createVNode(unref(IconRotateRight))
+                    ]),
+                    _: 1
+                  })
+                ]),
+                _: 1
+              }),
+              createVNode(unref(Tooltip), { content: "\u91CD\u7F6E" }, {
+                default: withCtx(() => [
+                  createVNode(unref(Button), {
+                    class: "cropper-btn",
+                    shape: "circle",
+                    onClick: cropperReset
+                  }, {
+                    default: withCtx(() => [
+                      createVNode(unref(IconSync))
+                    ]),
+                    _: 1
+                  })
+                ]),
+                _: 1
+              })
+            ]),
+            createElementVNode("div", _hoisted_10, [
+              createVNode(unref(Space), null, {
+                default: withCtx(() => [
+                  createVNode(unref(Button), {
+                    size: "medium",
+                    onClick: cancelDialog
+                  }, {
+                    default: withCtx(() => [
+                      createTextVNode("\u53D6\u6D88")
+                    ]),
+                    _: 1
+                  }),
+                  withDirectives(createVNode(unref(Button), {
+                    size: "medium",
+                    type: "primary",
+                    loading: saveLoading.value,
+                    onClick: save
+                  }, {
+                    default: withCtx(() => [
+                      createTextVNode("\u88C1\u526A")
+                    ]),
+                    _: 1
+                  }, 8, ["loading"]), [
+                    [vShow, !croppering.value]
+                  ])
+                ]),
+                _: 1
+              })
+            ])
+          ])
+        ]),
+        default: withCtx(() => [
+          createElementVNode("div", _hoisted_1, [
+            withDirectives((openBlock(), createElementBlock("div", {
+              class: normalizeClass(["edit", {
+                fullHeight: _ctx.aspectRatioProp && !Array.isArray(_ctx.aspectRatioProp)
+              }])
+            }, [
+              createElementVNode("div", _hoisted_2, [
+                editImage.value ? (openBlock(), createElementBlock("img", {
+                  key: 0,
+                  id: "cropper_img",
+                  class: "position",
+                  crossorigin: "anonymous",
+                  src: editImage.value,
+                  onLoad: loadImage
+                }, null, 40, _hoisted_3)) : createCommentVNode("v-if", true)
+              ])
+            ], 2)), [
+              [_directive_loading, croppering.value]
+            ]),
+            !_ctx.aspectRatioProp ? (openBlock(), createElementBlock("div", _hoisted_4, [
+              (openBlock(), createElementBlock(Fragment, null, renderList(aspectRatioList, (item, i) => {
+                return createElementVNode("div", {
+                  key: item.lable,
+                  class: normalizeClass(["btn btn" + (i + 1), { active: aspectRatioActive.value === i }]),
+                  onClick: ($event) => cropper(item.value, i)
+                }, toDisplayString(item.label), 11, _hoisted_5);
+              }), 64))
+            ])) : createCommentVNode("v-if", true),
+            _ctx.aspectRatioProp && Array.isArray(_ctx.aspectRatioProp) && customizedAspectRatioList.value.length > 0 ? (openBlock(), createElementBlock("div", _hoisted_6, [
+              (openBlock(true), createElementBlock(Fragment, null, renderList(customizedAspectRatioList.value, (item, i) => {
+                return openBlock(), createElementBlock("div", {
+                  key: item.lable,
+                  class: normalizeClass([
+                    "btn btn" + (item.buttonIndex + 1),
+                    { active: aspectRatioActive.value === i }
+                  ]),
+                  onClick: ($event) => cropper(item.value, i)
+                }, toDisplayString(item.label), 11, _hoisted_7);
+              }), 128))
+            ])) : createCommentVNode("v-if", true)
+          ])
+        ]),
+        _: 1
+      }, 8, ["visible"]);
+    };
+  }
+});
+export { _sfc_main as default };

package/es/imageCrop/index.d.ts

@@ -0,0 +1,2 @@
+declare const imageCrop: any;
+export default imageCrop;

package/es/imageCrop/index.js

@@ -0,0 +1,7 @@
+import _sfc_main from "./component.js";
+const imageCrop = Object.assign(_sfc_main, {
+  install: (app) => {
+    app.component(_sfc_main.name, _sfc_main);
+  }
+});
+export { imageCrop as default };

package/es/imageCrop/script/api.d.ts

@@ -0,0 +1 @@
+export declare function getFileRealUrl(BASE_API: string, url: string): import("axios").AxiosPromise<any>;

package/es/imageCrop/script/api.js

@@ -0,0 +1,11 @@
+import request from "../../utils/request.js";
+function getFileRealUrl(BASE_API, url) {
+  return request(BASE_API, {
+    url,
+    method: "get",
+    params: {
+      real_url: "true"
+    }
+  });
+}
+export { getFileRealUrl };