@sbs-plugin/vue2-image-process 0.0.8 → 0.0.10

package/dist/{vue2-image-processing.common.js → vue2-image-process.common.js}

@@ -3543,7 +3543,7 @@ if (typeof window !== 'undefined') {
 // Indicate to webpack that this file can be concatenated
 /* harmony default export */ var setPublicPath = (null);
 
-;// ./node_modules/.pnpm/thread-loader@3.0.4_webpack@5.99.9/node_modules/thread-loader/dist/cjs.js!./node_modules/.pnpm/babel-loader@8.4.1_@babel+core@7.27.4_webpack@5.99.9/node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/.pnpm/vue-loader@15.11.1_@vue+compiler-sfc@3.5.16_css-loader@6.11.0_webpack@5.99.9__lodash@4.17.21__w7knhy35vnjmebqosxmmnor4uq/node_modules/vue-loader/lib/loaders/templateLoader.js??ruleSet[1].rules[3]!./node_modules/.pnpm/vue-loader@15.11.1_@vue+compiler-sfc@3.5.16_css-loader@6.11.0_webpack@5.99.9__lodash@4.17.21__w7knhy35vnjmebqosxmmnor4uq/node_modules/vue-loader/lib/index.js??vue-loader-options!./src/components/AIImageMatting.vue?vue&type=template&id=795d171d&scoped=true
+;// ./node_modules/.pnpm/thread-loader@3.0.4_webpack@5.99.9/node_modules/thread-loader/dist/cjs.js!./node_modules/.pnpm/babel-loader@8.4.1_@babel+core@7.27.4_webpack@5.99.9/node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/.pnpm/vue-loader@15.11.1_@vue+compiler-sfc@3.5.16_css-loader@6.11.0_webpack@5.99.9__lodash@4.17.21__w7knhy35vnjmebqosxmmnor4uq/node_modules/vue-loader/lib/loaders/templateLoader.js??ruleSet[1].rules[3]!./node_modules/.pnpm/vue-loader@15.11.1_@vue+compiler-sfc@3.5.16_css-loader@6.11.0_webpack@5.99.9__lodash@4.17.21__w7knhy35vnjmebqosxmmnor4uq/node_modules/vue-loader/lib/index.js??vue-loader-options!./src/components/ImageMatting.vue?vue&type=template&id=4def8405&scoped=true
 var render = function render() {
   var _vm = this,
     _c = _vm._self._c;
@@ -7686,7 +7686,7 @@ axios.default = axios;
 // EXTERNAL MODULE: ./node_modules/.pnpm/lz-string@1.5.0/node_modules/lz-string/libs/lz-string.js
 var lz_string = __webpack_require__(8878);
 var lz_string_default = /*#__PURE__*/__webpack_require__.n(lz_string);
-;// ./node_modules/.pnpm/thread-loader@3.0.4_webpack@5.99.9/node_modules/thread-loader/dist/cjs.js!./node_modules/.pnpm/babel-loader@8.4.1_@babel+core@7.27.4_webpack@5.99.9/node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/.pnpm/vue-loader@15.11.1_@vue+compiler-sfc@3.5.16_css-loader@6.11.0_webpack@5.99.9__lodash@4.17.21__w7knhy35vnjmebqosxmmnor4uq/node_modules/vue-loader/lib/index.js??vue-loader-options!./src/components/AIImageMatting.vue?vue&type=script&lang=js
+;// ./node_modules/.pnpm/thread-loader@3.0.4_webpack@5.99.9/node_modules/thread-loader/dist/cjs.js!./node_modules/.pnpm/babel-loader@8.4.1_@babel+core@7.27.4_webpack@5.99.9/node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/.pnpm/vue-loader@15.11.1_@vue+compiler-sfc@3.5.16_css-loader@6.11.0_webpack@5.99.9__lodash@4.17.21__w7knhy35vnjmebqosxmmnor4uq/node_modules/vue-loader/lib/index.js??vue-loader-options!./src/components/ImageMatting.vue?vue&type=script&lang=js
 
 
 
@@ -7696,8 +7696,8 @@ const requestUrl = {
   fakeSegment: `https://apollo.51kandianshi.com/imageaicutout/sam/api/segment`,
   API_IMG: `https://outerh5.51kandianshi.com/staticsaicoutout`
 };
-/* harmony default export */ var AIImageMattingvue_type_script_lang_js = ({
-  name: 'AIImageMatting',
+/* harmony default export */ var ImageMattingvue_type_script_lang_js = ({
+  name: "ImageMatting",
   props: {
     visible: {
       type: Boolean,
@@ -7705,13 +7705,13 @@ const requestUrl = {
     },
     src: {
       type: String,
-      default: ''
+      default: ""
     }
   },
   data() {
     return {
-      workspaceSrc: '',
-      path: '',
+      workspaceSrc: this.src,
+      path: "",
       loading: false,
       imgRef: null,
       canvasRef: null,
@@ -7720,89 +7720,86 @@ const requestUrl = {
         w: 0,
         h: 0
       },
-      w: '0',
-      h: '0',
+      w: "0",
+      h: "0",
       left: 0,
       scale: 1,
       clicks: [],
       lock: false,
       canvasVisible: true,
       isEverything: false,
-      afterEditSrc: ''
+      afterEditSrc: ""
     };
   },
   watch: {
-    visible: {
-      handler: function (newVal) {
-        if (newVal) {
-          this.ctx = this.$refs.canvasRef.getContext('2d');
-          this.initImage();
-        }
-      },
-      deep: false,
-      immediate: false
+    visible: async function (newVal) {
+      if (newVal) {
+        await this.$nextTick();
+        this.ctx = this.$refs.canvasRef.getContext("2d");
+        this.initImage();
+      } else {
+        this.workspaceSrc = "";
+        this.afterEditSrc = "";
+      }
     }
   },
-  mounted() {
-    // 组件挂载时的初始化操作
-  },
   methods: {
     close() {
-      this.$emit('update:visible', false);
+      this.$emit("update:visible", false);
     },
     handleMask() {
       if (this.visible) {
         this.close();
       }
     },
-    initImage() {
-      const self = this;
-      fetch(this.src).then(response => response.blob()).then(blob => {
-        return lib_axios.post(requestUrl.uploadImg, {
-          file: new File([blob], 'image.jpg', {
-            type: 'image/jpeg'
-          })
-        }, {
-          headers: {
-            'Content-Type': 'multipart/form-data'
-          }
-        });
-      }).then(res => {
-        const image = new Image();
-        image.src = `${requestUrl.API_IMG}/sam/api/upload/${res.data.filename}`;
-        self.workspaceSrc = `${requestUrl.API_IMG}/sam/api/upload/${res.data.filename}`;
-        self.path = res.data.path;
-        image.onload = () => {
-          let w_ = image.width,
-            h_ = image.height;
-          let nw, nh;
-          let mw = 800,
-            mh = 600;
-          let ratio = w_ / h_;
-          if (ratio * mh > mw) {
-            nw = mw;
-            nh = mw / ratio;
-          } else {
-            nh = mh;
-            nw = ratio * mh;
-          }
-          self.originalSize = {
-            w: w_,
-            h: h_
-          };
-          nw = parseInt(nw);
-          nh = parseInt(nh);
-          self.w = nw + 'px';
-          self.h = nh + 'px';
-          self.left = (mw - nw) / 2;
-          self.scale = nw / w_;
-          self.$refs.imgRef.addEventListener('contextmenu', e => e.preventDefault());
-          self.$refs.imgRef.addEventListener('mousemove', self.throttle(self.handleMouseMove, 150));
-          self.$refs.canvasRef.style.transform = `scale(${self.scale})`;
-        };
-      }).catch(err => {
-        console.error(err);
+    async initImage() {
+      const response = await fetch(this.src);
+      const blob = await response.blob();
+      const {
+        data: res
+      } = await lib_axios.post(requestUrl.uploadImg, {
+        file: new File([blob], "image.jpg", {
+          type: "image/jpeg"
+        })
+      }, {
+        headers: {
+          "Content-Type": "multipart/form-data"
+        }
       });
+      const image = new Image();
+      image.src = `${requestUrl.API_IMG}/sam/api/upload/${res.filename}`;
+      this.workspaceSrc = `${requestUrl.API_IMG}/sam/api/upload/${res.filename}`;
+      this.path = res.path;
+      image.onload = () => {
+        let w_ = image.width,
+          h_ = image.height;
+        let nw, nh;
+        let mw = 800,
+          mh = 600;
+        console.log(mw, mh);
+        let ratio = w_ / h_;
+        if (ratio * mh > mw) {
+          nw = mw;
+          nh = mw / ratio;
+        } else {
+          nh = mh;
+          nw = ratio * mh;
+        }
+        this.originalSize = {
+          w: w_,
+          h: h_
+        };
+        nw = parseInt(nw);
+        nh = parseInt(nh);
+        this.w = nw + "px";
+        this.h = nh + "px";
+        this.left = (mw - nw) / 2;
+        this.scale = nw / w_;
+        this.$refs.imgRef.addEventListener("contextmenu", e => e.preventDefault());
+        this.$refs.imgRef.addEventListener("mousemove", this.throttle(this.handleMouseMove, 150));
+        this.$refs.canvasRef.style.transform = `scale(${this.scale})`;
+      };
+      return;
     },
     handleMouseMove(e) {
       if (this.isEverything) {
@@ -7861,18 +7858,18 @@ const requestUrl = {
       return click;
     },
     placePoint(x, y, clickType) {
-      let box = document.getElementById('point-box');
-      let point = document.createElement('div');
-      point.className = 'segment-point' + (clickType ? '' : ' negative');
+      let box = document.getElementById("point-box");
+      let point = document.createElement("div");
+      point.className = "segment-point" + (clickType ? "" : " negative");
       point.style = `position: absolute;
                       width: 10px;
                       height: 10px;
                       border-radius: 50%;
-                      background-color: ${clickType ? '#409EFF' : '#F56C6C '};
+                      background-color: ${clickType ? "#409EFF" : "#F56C6C "};
                       left: ${x - 5}px;
                       top: ${y - 5}px`;
       // 点的id是在clicks数组中的下标索引
-      point.id = 'point-' + this.clicks.length;
+      point.id = "point-" + this.clicks.length;
       box.appendChild(point);
     },
     getMask(clks) {
@@ -7893,6 +7890,7 @@ const requestUrl = {
         this.lock = false;
       }).catch(err => {
         console.error(err);
+        // message.error('生成失败')
         this.lock = false;
       });
     },
@@ -7918,7 +7916,7 @@ const requestUrl = {
       this.ctx.putImageData(imgData, 0, 0);
     },
     removePoint(i) {
-      const selector = 'point-' + i;
+      const selector = "point-" + i;
       let point = document.getElementById(selector);
       if (point != null) {
         point.remove();
@@ -7930,18 +7928,20 @@ const requestUrl = {
       }
       this.clicks = [];
       this.isEverything = false;
-      this.ctx.clearRect(0, 0, this.canvasRef.width, this.canvasRef.height);
+      this.ctx.clearRect(0, 0, this.$refs.canvasRef.width, this.$refs.canvasRef.height);
     },
     imageMatting() {
       if (this.lock || this.clicks.length === 0) {
         return;
       }
-      this.cutOutImage(this.originalSize, this.$refs.imgRef, this.$refs.canvasRef, blob => {
-        this.afterEditSrc = URL.createObjectURL(blob);
+      this.cutOutImage(this.originalSize, this.$refs.imgRef, this.$refs.canvasRef, base64 => {
+        this.afterEditSrc = base64;
+        // 不需要之后用下面的清除文件
+        // URL.revokeObjectURL(url);
       });
     },
     handleOk() {
-      this.$emit('update:visible', false, this.afterEditSrc);
+      this.$emit("update:visible", false, this.afterEditSrc);
     },
     throttle(func, delay) {
       let timer = null; // 定时器变量
@@ -7979,8 +7979,8 @@ const requestUrl = {
       }
       return result;
     },
-    decodeRleCounts(shape, counts) {
-      let arr = new Uint8Array(shape[0] * shape[1]);
+    decodeRleCounts([rows, cols], counts) {
+      let arr = new Uint8Array(rows * cols);
       let i = 0;
       let flag = 0;
       for (let k of counts) {
@@ -7995,11 +7995,11 @@ const requestUrl = {
       w,
       h
     }, image, canvas, callback) {
-      const resultCanvas = document.createElement('canvas'),
-        resultCtx = resultCanvas.getContext('2d', {
+      const resultCanvas = document.createElement("canvas"),
+        resultCtx = resultCanvas.getContext("2d", {
           willReadFrequently: true
         }),
-        originalCtx = canvas.getContext('2d', {
+        originalCtx = canvas.getContext("2d", {
           willReadFrequently: true
         });
       resultCanvas.width = w;
@@ -8038,26 +8038,29 @@ const requestUrl = {
       const startY = minY;
       resultCtx.putImageData(imageData, 0, 0);
       // 创建一个新的canvas来存储特定区域的图像
-      const croppedCanvas = document.createElement('canvas');
-      const croppedContext = croppedCanvas.getContext('2d');
+      const croppedCanvas = document.createElement("canvas");
+      const croppedContext = croppedCanvas.getContext("2d");
       croppedCanvas.width = width;
       croppedCanvas.height = height;
       // 将特定区域绘制到新canvas上
       croppedContext.drawImage(resultCanvas, startX, startY, width, height, 0, 0, width, height);
-      croppedCanvas.toBlob(blob => {
-        if (callback) {
-          callback(blob);
-        }
-      }, 'image/png');
+      // croppedCanvas.toBlob((blob) => {
+      //   if(callback) {
+      //     callback(blob)
+      //   }
+      // }, 'image/png')
+      // let base64 = croppedCanvas.toDataURL('image/png').replace('data:image/png;base64,', '')
+      let base64 = croppedCanvas.toDataURL("image/png");
+      callback(base64);
     }
   }
 });
-;// ./src/components/AIImageMatting.vue?vue&type=script&lang=js
- /* harmony default export */ var components_AIImageMattingvue_type_script_lang_js = (AIImageMattingvue_type_script_lang_js); 
-;// ./node_modules/.pnpm/mini-css-extract-plugin@2.9.2_webpack@5.99.9/node_modules/mini-css-extract-plugin/dist/loader.js??clonedRuleSet-32.use[0]!./node_modules/.pnpm/css-loader@6.11.0_webpack@5.99.9/node_modules/css-loader/dist/cjs.js??clonedRuleSet-32.use[1]!./node_modules/.pnpm/vue-loader@15.11.1_@vue+compiler-sfc@3.5.16_css-loader@6.11.0_webpack@5.99.9__lodash@4.17.21__w7knhy35vnjmebqosxmmnor4uq/node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/.pnpm/postcss-loader@6.2.1_postcss@8.5.6_webpack@5.99.9/node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-32.use[2]!./node_modules/.pnpm/less-loader@8.1.1_less@4.3.0_webpack@5.99.9/node_modules/less-loader/dist/cjs.js??clonedRuleSet-32.use[3]!./node_modules/.pnpm/vue-loader@15.11.1_@vue+compiler-sfc@3.5.16_css-loader@6.11.0_webpack@5.99.9__lodash@4.17.21__w7knhy35vnjmebqosxmmnor4uq/node_modules/vue-loader/lib/index.js??vue-loader-options!./src/components/AIImageMatting.vue?vue&type=style&index=0&id=795d171d&prod&lang=less&scoped=true
+;// ./src/components/ImageMatting.vue?vue&type=script&lang=js
+ /* harmony default export */ var components_ImageMattingvue_type_script_lang_js = (ImageMattingvue_type_script_lang_js); 
+;// ./node_modules/.pnpm/mini-css-extract-plugin@2.9.2_webpack@5.99.9/node_modules/mini-css-extract-plugin/dist/loader.js??clonedRuleSet-32.use[0]!./node_modules/.pnpm/css-loader@6.11.0_webpack@5.99.9/node_modules/css-loader/dist/cjs.js??clonedRuleSet-32.use[1]!./node_modules/.pnpm/vue-loader@15.11.1_@vue+compiler-sfc@3.5.16_css-loader@6.11.0_webpack@5.99.9__lodash@4.17.21__w7knhy35vnjmebqosxmmnor4uq/node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/.pnpm/postcss-loader@6.2.1_postcss@8.5.6_webpack@5.99.9/node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-32.use[2]!./node_modules/.pnpm/less-loader@8.1.1_less@4.3.0_webpack@5.99.9/node_modules/less-loader/dist/cjs.js??clonedRuleSet-32.use[3]!./node_modules/.pnpm/vue-loader@15.11.1_@vue+compiler-sfc@3.5.16_css-loader@6.11.0_webpack@5.99.9__lodash@4.17.21__w7knhy35vnjmebqosxmmnor4uq/node_modules/vue-loader/lib/index.js??vue-loader-options!./src/components/ImageMatting.vue?vue&type=style&index=0&id=4def8405&prod&lang=less&scoped=true
 // extracted by mini-css-extract-plugin
 
-;// ./src/components/AIImageMatting.vue?vue&type=style&index=0&id=795d171d&prod&lang=less&scoped=true
+;// ./src/components/ImageMatting.vue?vue&type=style&index=0&id=4def8405&prod&lang=less&scoped=true
 
 ;// ./node_modules/.pnpm/vue-loader@15.11.1_@vue+compiler-sfc@3.5.16_css-loader@6.11.0_webpack@5.99.9__lodash@4.17.21__w7knhy35vnjmebqosxmmnor4uq/node_modules/vue-loader/lib/runtime/componentNormalizer.js
 /* globals __VUE_SSR_CONTEXT__ */
@@ -8157,7 +8160,7 @@ function normalizeComponent(
   }
 }
 
-;// ./src/components/AIImageMatting.vue
+;// ./src/components/ImageMatting.vue
 
 
 
@@ -8167,19 +8170,19 @@ function normalizeComponent(
 /* normalize component */
 
 var component = normalizeComponent(
-  components_AIImageMattingvue_type_script_lang_js,
+  components_ImageMattingvue_type_script_lang_js,
   render,
   staticRenderFns,
   false,
   null,
-  "795d171d",
+  "4def8405",
   null
   
 )
 
-/* harmony default export */ var AIImageMatting = (component.exports);
-;// ./node_modules/.pnpm/thread-loader@3.0.4_webpack@5.99.9/node_modules/thread-loader/dist/cjs.js!./node_modules/.pnpm/babel-loader@8.4.1_@babel+core@7.27.4_webpack@5.99.9/node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/.pnpm/vue-loader@15.11.1_@vue+compiler-sfc@3.5.16_css-loader@6.11.0_webpack@5.99.9__lodash@4.17.21__w7knhy35vnjmebqosxmmnor4uq/node_modules/vue-loader/lib/loaders/templateLoader.js??ruleSet[1].rules[3]!./node_modules/.pnpm/vue-loader@15.11.1_@vue+compiler-sfc@3.5.16_css-loader@6.11.0_webpack@5.99.9__lodash@4.17.21__w7knhy35vnjmebqosxmmnor4uq/node_modules/vue-loader/lib/index.js??vue-loader-options!./src/components/AIImageExpandResolution.vue?vue&type=template&id=865c5d88&scoped=true
-var AIImageExpandResolutionvue_type_template_id_865c5d88_scoped_true_render = function render() {
+/* harmony default export */ var ImageMatting = (component.exports);
+;// ./node_modules/.pnpm/thread-loader@3.0.4_webpack@5.99.9/node_modules/thread-loader/dist/cjs.js!./node_modules/.pnpm/babel-loader@8.4.1_@babel+core@7.27.4_webpack@5.99.9/node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/.pnpm/vue-loader@15.11.1_@vue+compiler-sfc@3.5.16_css-loader@6.11.0_webpack@5.99.9__lodash@4.17.21__w7knhy35vnjmebqosxmmnor4uq/node_modules/vue-loader/lib/loaders/templateLoader.js??ruleSet[1].rules[3]!./node_modules/.pnpm/vue-loader@15.11.1_@vue+compiler-sfc@3.5.16_css-loader@6.11.0_webpack@5.99.9__lodash@4.17.21__w7knhy35vnjmebqosxmmnor4uq/node_modules/vue-loader/lib/index.js??vue-loader-options!./src/components/ExpandResolution.vue?vue&type=template&id=531f26f6&scoped=true
+var ExpandResolutionvue_type_template_id_531f26f6_scoped_true_render = function render() {
   var _vm = this,
     _c = _vm._self._c;
   return _c('transition', {
@@ -8265,21 +8268,21 @@ var AIImageExpandResolutionvue_type_template_id_865c5d88_scoped_true_render = fu
     staticClass: "line-md--loading-alt-loop"
   }), _c('div', [_vm._v("加载中...")])])])])], 1)])]) : _vm._e()]);
 };
-var AIImageExpandResolutionvue_type_template_id_865c5d88_scoped_true_staticRenderFns = [];
+var ExpandResolutionvue_type_template_id_531f26f6_scoped_true_staticRenderFns = [];
 
 // EXTERNAL MODULE: ./node_modules/.pnpm/spark-md5@3.0.2/node_modules/spark-md5/spark-md5.js
 var spark_md5 = __webpack_require__(6616);
 var spark_md5_default = /*#__PURE__*/__webpack_require__.n(spark_md5);
-;// ./node_modules/.pnpm/thread-loader@3.0.4_webpack@5.99.9/node_modules/thread-loader/dist/cjs.js!./node_modules/.pnpm/babel-loader@8.4.1_@babel+core@7.27.4_webpack@5.99.9/node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/.pnpm/vue-loader@15.11.1_@vue+compiler-sfc@3.5.16_css-loader@6.11.0_webpack@5.99.9__lodash@4.17.21__w7knhy35vnjmebqosxmmnor4uq/node_modules/vue-loader/lib/index.js??vue-loader-options!./src/components/AIImageExpandResolution.vue?vue&type=script&lang=js
+;// ./node_modules/.pnpm/thread-loader@3.0.4_webpack@5.99.9/node_modules/thread-loader/dist/cjs.js!./node_modules/.pnpm/babel-loader@8.4.1_@babel+core@7.27.4_webpack@5.99.9/node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/.pnpm/vue-loader@15.11.1_@vue+compiler-sfc@3.5.16_css-loader@6.11.0_webpack@5.99.9__lodash@4.17.21__w7knhy35vnjmebqosxmmnor4uq/node_modules/vue-loader/lib/index.js??vue-loader-options!./src/components/ExpandResolution.vue?vue&type=script&lang=js
 
 
 
-const AIImageExpandResolutionvue_type_script_lang_js_requestUrl = {
-  openTask: `https://xingjian.51kandianshi.com/aigc-tools/super-resolve/generate`,
-  checkTask: `https://xingjian.51kandianshi.com/aigc-tools/super-resolve/query`
+const ExpandResolutionvue_type_script_lang_js_requestUrl = {
+  openTask: `https://apollo.51kandianshi.com/aigc-tools/super-resolve/generate`,
+  checkTask: `https://apollo.51kandianshi.com/aigc-tools/super-resolve/query`
 };
-/* harmony default export */ var AIImageExpandResolutionvue_type_script_lang_js = ({
-  name: "AISuperResolutionModal",
+/* harmony default export */ var ExpandResolutionvue_type_script_lang_js = ({
+  name: "ExpandResolution",
   props: {
     visible: {
       type: Boolean,
@@ -8293,7 +8296,7 @@ const AIImageExpandResolutionvue_type_script_lang_js_requestUrl = {
   data() {
     return {
       loading: false,
-      workspaceSrc: "",
+      workspaceSrc: this.src,
       afterEditSrc: "",
       taskId: "",
       interval: null,
@@ -8307,9 +8310,6 @@ const AIImageExpandResolutionvue_type_script_lang_js_requestUrl = {
       }]
     };
   },
-  created() {
-    this.workspaceSrc = "https://cre.51kandianshi.com/iopaint/Images/3bf3f294-e6e8-411d-8531-8eba990a3456.png";
-  },
   watch: {
     visible(newVal) {
       if (newVal) {
@@ -8339,7 +8339,7 @@ const AIImageExpandResolutionvue_type_script_lang_js_requestUrl = {
         return;
       }
       try {
-        const res = await lib_axios.get(`${AIImageExpandResolutionvue_type_script_lang_js_requestUrl.checkTask}?taskId=${this.taskId}`, {
+        const res = await lib_axios.get(`${ExpandResolutionvue_type_script_lang_js_requestUrl.checkTask}?taskId=${this.taskId}`, {
           headers: {
             accessToken: this.$token
           }
@@ -8367,7 +8367,7 @@ const AIImageExpandResolutionvue_type_script_lang_js_requestUrl = {
       let md5 = await this.getImageMd5(this.workspaceSrc);
       this.loading = true;
       try {
-        const res = await lib_axios.post(AIImageExpandResolutionvue_type_script_lang_js_requestUrl.openTask, {
+        const res = await lib_axios.post(ExpandResolutionvue_type_script_lang_js_requestUrl.openTask, {
           fileUrl: this.workspaceSrc,
           md5,
           mode: 1,
@@ -8427,14 +8427,369 @@ const AIImageExpandResolutionvue_type_script_lang_js_requestUrl = {
     }
   }
 });
-;// ./src/components/AIImageExpandResolution.vue?vue&type=script&lang=js
- /* harmony default export */ var components_AIImageExpandResolutionvue_type_script_lang_js = (AIImageExpandResolutionvue_type_script_lang_js); 
-;// ./node_modules/.pnpm/mini-css-extract-plugin@2.9.2_webpack@5.99.9/node_modules/mini-css-extract-plugin/dist/loader.js??clonedRuleSet-32.use[0]!./node_modules/.pnpm/css-loader@6.11.0_webpack@5.99.9/node_modules/css-loader/dist/cjs.js??clonedRuleSet-32.use[1]!./node_modules/.pnpm/vue-loader@15.11.1_@vue+compiler-sfc@3.5.16_css-loader@6.11.0_webpack@5.99.9__lodash@4.17.21__w7knhy35vnjmebqosxmmnor4uq/node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/.pnpm/postcss-loader@6.2.1_postcss@8.5.6_webpack@5.99.9/node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-32.use[2]!./node_modules/.pnpm/less-loader@8.1.1_less@4.3.0_webpack@5.99.9/node_modules/less-loader/dist/cjs.js??clonedRuleSet-32.use[3]!./node_modules/.pnpm/vue-loader@15.11.1_@vue+compiler-sfc@3.5.16_css-loader@6.11.0_webpack@5.99.9__lodash@4.17.21__w7knhy35vnjmebqosxmmnor4uq/node_modules/vue-loader/lib/index.js??vue-loader-options!./src/components/AIImageExpandResolution.vue?vue&type=style&index=0&id=865c5d88&prod&lang=less&scoped=true
+;// ./src/components/ExpandResolution.vue?vue&type=script&lang=js
+ /* harmony default export */ var components_ExpandResolutionvue_type_script_lang_js = (ExpandResolutionvue_type_script_lang_js); 
+;// ./node_modules/.pnpm/mini-css-extract-plugin@2.9.2_webpack@5.99.9/node_modules/mini-css-extract-plugin/dist/loader.js??clonedRuleSet-32.use[0]!./node_modules/.pnpm/css-loader@6.11.0_webpack@5.99.9/node_modules/css-loader/dist/cjs.js??clonedRuleSet-32.use[1]!./node_modules/.pnpm/vue-loader@15.11.1_@vue+compiler-sfc@3.5.16_css-loader@6.11.0_webpack@5.99.9__lodash@4.17.21__w7knhy35vnjmebqosxmmnor4uq/node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/.pnpm/postcss-loader@6.2.1_postcss@8.5.6_webpack@5.99.9/node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-32.use[2]!./node_modules/.pnpm/less-loader@8.1.1_less@4.3.0_webpack@5.99.9/node_modules/less-loader/dist/cjs.js??clonedRuleSet-32.use[3]!./node_modules/.pnpm/vue-loader@15.11.1_@vue+compiler-sfc@3.5.16_css-loader@6.11.0_webpack@5.99.9__lodash@4.17.21__w7knhy35vnjmebqosxmmnor4uq/node_modules/vue-loader/lib/index.js??vue-loader-options!./src/components/ExpandResolution.vue?vue&type=style&index=0&id=531f26f6&prod&lang=less&scoped=true
+// extracted by mini-css-extract-plugin
+
+;// ./src/components/ExpandResolution.vue?vue&type=style&index=0&id=531f26f6&prod&lang=less&scoped=true
+
+;// ./src/components/ExpandResolution.vue
+
+
+
+;
+
+
+/* normalize component */
+
+var ExpandResolution_component = normalizeComponent(
+  components_ExpandResolutionvue_type_script_lang_js,
+  ExpandResolutionvue_type_template_id_531f26f6_scoped_true_render,
+  ExpandResolutionvue_type_template_id_531f26f6_scoped_true_staticRenderFns,
+  false,
+  null,
+  "531f26f6",
+  null
+  
+)
+
+/* harmony default export */ var ExpandResolution = (ExpandResolution_component.exports);
+;// ./node_modules/.pnpm/thread-loader@3.0.4_webpack@5.99.9/node_modules/thread-loader/dist/cjs.js!./node_modules/.pnpm/babel-loader@8.4.1_@babel+core@7.27.4_webpack@5.99.9/node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/.pnpm/vue-loader@15.11.1_@vue+compiler-sfc@3.5.16_css-loader@6.11.0_webpack@5.99.9__lodash@4.17.21__w7knhy35vnjmebqosxmmnor4uq/node_modules/vue-loader/lib/loaders/templateLoader.js??ruleSet[1].rules[3]!./node_modules/.pnpm/vue-loader@15.11.1_@vue+compiler-sfc@3.5.16_css-loader@6.11.0_webpack@5.99.9__lodash@4.17.21__w7knhy35vnjmebqosxmmnor4uq/node_modules/vue-loader/lib/index.js??vue-loader-options!./src/components/ExpandImg.vue?vue&type=template&id=b59d9692&scoped=true
+var ExpandImgvue_type_template_id_b59d9692_scoped_true_render = function render() {
+  var _vm = this,
+    _c = _vm._self._c;
+  return _c('transition', {
+    attrs: {
+      "name": "fade"
+    }
+  }, [_c('div', {
+    directives: [{
+      name: "show",
+      rawName: "v-show",
+      value: _vm.visible,
+      expression: "visible"
+    }],
+    staticClass: "modal-overlay",
+    on: {
+      "click": function ($event) {
+        if ($event.target !== $event.currentTarget) return null;
+        return _vm.handleMask.apply(null, arguments);
+      }
+    }
+  }, [_c('div', {
+    staticClass: "modal-content"
+  }, [_c('div', {
+    staticClass: "modal-header"
+  }, [_vm._v("AI扩图")]), _c('div', {
+    staticClass: "modal-body"
+  }, [_c('div', {
+    staticClass: "flex",
+    on: {
+      "click": function ($event) {
+        $event.stopPropagation();
+      }
+    }
+  }, [_c('div', {
+    staticClass: "workspace"
+  }, [_c('img', {
+    staticClass: "originalimg",
+    attrs: {
+      "src": _vm.workspaceSrc,
+      "alt": "AI扩图"
+    }
+  })]), _c('div', {
+    staticClass: "config"
+  }, [_c('div', {
+    staticClass: "title"
+  }, [_vm._v("尺寸比例")]), _c('div', {
+    staticClass: "ratio"
+  }, _vm._l(_vm.ratio, function (item, index) {
+    return _c('div', {
+      key: index,
+      staticClass: "ratio-item",
+      on: {
+        "click": function ($event) {
+          _vm.currentRatio = index;
+        }
+      }
+    }, [_c('img', {
+      staticClass: "ratio-img",
+      attrs: {
+        "src": _vm.currentRatio == index ? item.icon_active : item.icon
+      }
+    })]);
+  }), 0), _vm.currentRatio == 0 ? _c('div', {
+    staticClass: "title"
+  }, [_vm._v("方位扩图百分比")]) : _vm._e(), _vm.currentRatio == 0 ? _c('div', {
+    staticClass: "position"
+  }, _vm._l(_vm.position, function (item, index) {
+    return _c('div', {
+      key: index,
+      staticClass: "position-item"
+    }, [_c('span', [_vm._v(_vm._s(item.title))]), _c('div', {
+      staticClass: "position-input"
+    }, [_c('input', {
+      domProps: {
+        "value": item.value
+      }
+    }), _c('span', {
+      staticClass: "suffix"
+    }, [_vm._v("%")])])]);
+  }), 0) : _vm._e(), _c('div', {
+    staticClass: "button",
+    on: {
+      "click": _vm.expandImg
+    }
+  }, [_vm._v("扩图")]), _c('div', {
+    staticClass: "button",
+    on: {
+      "click": _vm.handleOk
+    }
+  }, [_vm._v("应用")])])]), _c('transition', {
+    attrs: {
+      "name": "fade"
+    }
+  }, [_c('div', {
+    directives: [{
+      name: "show",
+      rawName: "v-show",
+      value: _vm.loading,
+      expression: "loading"
+    }],
+    staticClass: "spin-mask"
+  }, [_c('div', {
+    staticClass: "spin-loading"
+  }, [_c('span', {
+    staticClass: "line-md--loading-alt-loop"
+  }), _c('div', [_vm._v("加载中...")])])])])], 1)])])]);
+};
+var ExpandImgvue_type_template_id_b59d9692_scoped_true_staticRenderFns = [];
+
+;// ./node_modules/.pnpm/thread-loader@3.0.4_webpack@5.99.9/node_modules/thread-loader/dist/cjs.js!./node_modules/.pnpm/babel-loader@8.4.1_@babel+core@7.27.4_webpack@5.99.9/node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/.pnpm/vue-loader@15.11.1_@vue+compiler-sfc@3.5.16_css-loader@6.11.0_webpack@5.99.9__lodash@4.17.21__w7knhy35vnjmebqosxmmnor4uq/node_modules/vue-loader/lib/index.js??vue-loader-options!./src/components/ExpandImg.vue?vue&type=script&lang=js
+
+/* harmony default export */ var ExpandImgvue_type_script_lang_js = ({
+  name: "ExpandImg",
+  props: {
+    visible: {
+      type: Boolean,
+      default: false
+    },
+    src: {
+      type: String,
+      default: ""
+    }
+  },
+  data() {
+    return {
+      token: this.$token,
+      requestUrl: {
+        openTask: `https://apollo.51kandianshi.com/aigc-tools/text2pic/outPaintImage/task`,
+        checkTask: `https://apollo.51kandianshi.com/aigc-tools/text2pic/outPaintImage/info`
+      },
+      currentRatio: 0,
+      ratio: [{
+        title: "自定义",
+        icon: "https://cre.51kandianshi.com/sbs/2025/06/24/57c2fa87-8147-4985-b877-0463e438fb9a.png",
+        icon_active: "https://cre.51kandianshi.com/sbs/2025/06/24/44453238-c141-4bc7-9a27-87a1520313cc.png"
+      }, {
+        title: "16:9",
+        icon: "https://cre.51kandianshi.com/sbs/2025/06/24/eb51514a-b062-4fd9-94ea-63f12f1f58c6.png",
+        icon_active: "https://cre.51kandianshi.com/sbs/2025/06/24/2aa48c95-20d6-46bc-95b3-bd1f8996c23b.png",
+        ratio: 16 / 9
+      }, {
+        title: "9:16",
+        icon: "https://cre.51kandianshi.com/sbs/2025/06/24/de27bc9c-247a-4e53-ab62-8c23e8acdeeb.png",
+        icon_active: "https://cre.51kandianshi.com/sbs/2025/06/24/40d06111-21f6-4893-aefe-2da95043647b.png",
+        ratio: 9 / 16
+      }, {
+        title: "1:1",
+        icon: "https://cre.51kandianshi.com/sbs/2025/06/24/4493c8b5-9e44-46d0-aa14-f48fc0220cc3.png",
+        icon_active: "https://cre.51kandianshi.com/sbs/2025/06/24/0c0a1962-5e25-419d-8d1a-51cb974aa558.png",
+        ratio: 1
+      }, {
+        title: "3:2",
+        icon: "https://cre.51kandianshi.com/sbs/2025/06/24/cf85a09f-c902-4858-b535-190353902961.png",
+        icon_active: "https://cre.51kandianshi.com/sbs/2025/06/24/45a1fbf6-4aaa-48da-abc7-e7ea5a875739.png",
+        ratio: 3 / 2
+      }, {
+        title: "2:3",
+        icon: "https://cre.51kandianshi.com/sbs/2025/06/24/f767a51b-9f83-4069-987a-64f2283c3883.png",
+        icon_active: "https://cre.51kandianshi.com/sbs/2025/06/24/5e29a1ae-e0bc-4da6-92ce-6fa44e8a58a8.png",
+        ratio: 2 / 3
+      }],
+      position: [{
+        title: "左",
+        value: 0
+      }, {
+        title: "右",
+        value: 0
+      }, {
+        title: "上",
+        value: 0
+      }, {
+        title: "下",
+        value: 0
+      }],
+      workspaceSrc: this.src,
+      loading: false,
+      taskId: "",
+      interval: null
+    };
+  },
+  methods: {
+    close() {
+      this.$emit("update:visible", false);
+    },
+    handleMask() {
+      if (this.visible) {
+        this.close();
+      }
+    },
+    handleSize() {
+      return new Promise((resolve, reject) => {
+        const img = new Image();
+        img.src = this.workspaceSrc;
+        img.onload = () => {
+          const imgWidth = img.naturalWidth;
+          const imgHeight = img.naturalHeight;
+          const imgRatio = imgWidth / imgHeight;
+          // ratio < transRatio => h不变，改w
+          // ratio > transRatio => w不变，改h
+          if (this.currentRatio == 0) {
+            resolve({
+              left: 0,
+              right: 0,
+              top: 0,
+              bottom: 0,
+              maxWidth: imgWidth,
+              maxHeight: imgHeight
+            });
+          } else if (imgRatio == Number(this.ratio[this.currentRatio].ratio)) {
+            // message.warning('目前的比例和原图比例一致，请选择其他比例')
+            reject(new Error("目前的比例和原图比例一致，请选择其他比例"));
+          } else if (imgRatio < this.ratio[this.currentRatio].ratio) {
+            let transWidth = imgHeight * this.ratio[this.currentRatio].ratio;
+            let leftright = (transWidth - imgWidth) / 2 / imgWidth;
+            resolve({
+              left: leftright,
+              right: leftright,
+              top: 0,
+              bottom: 0,
+              maxWidth: transWidth,
+              maxHeight: imgHeight
+            });
+          } else {
+            let transHeight = imgWidth / this.ratio[this.currentRatio].ratio;
+            let topbottom = (transHeight - imgHeight) / 2 / imgHeight;
+            resolve({
+              left: 0,
+              right: 0,
+              top: topbottom,
+              bottom: topbottom,
+              maxWidth: imgWidth,
+              maxHeight: transHeight
+            });
+          }
+        };
+      });
+    },
+    async checkResult() {
+      if (this.taskId == "") {
+        return;
+      }
+      try {
+        const res = await lib_axios.get(`${this.requestUrl.checkTask}?taskId=${this.taskId}`, {
+          headers: {
+            accessToken: this.$token
+          }
+        });
+        if (res.data.code == 0 && res.data.data.status == 1) {
+          return res.data.data.picUrl;
+        } else if (res.data.code == 0 && res.data.data.status == 2) {
+          // message.warning('生成失败，请重新尝试')
+          this.loading = false;
+          clearInterval(this.interval);
+          return false;
+        }
+      } catch (error) {
+        this.loading = false;
+        clearInterval(this.interval);
+        // message.warning('请重新尝试')
+      }
+    },
+    async expandImg() {
+      this.loading = true;
+      let left = 0,
+        right = 0,
+        top = 0,
+        bottom = 0,
+        maxWidth = 0,
+        maxHeight = 0;
+      try {
+        const result = await this.handleSize();
+        left = result.left;
+        right = result.right;
+        top = result.top;
+        bottom = result.bottom;
+        maxWidth = result.maxWidth;
+        maxHeight = result.maxHeight;
+      } catch (error) {
+        this.loading = false;
+        return;
+      }
+      if (this.currentRatio == 0) {
+        left = this.position[0].value / 100;
+        right = this.position[1].value / 100;
+        top = this.position[2].value / 100;
+        bottom = this.position[3].value / 100;
+      }
+      try {
+        const res = await lib_axios.post(this.requestUrl.openTask, {
+          imageUrl: this.workspaceSrc,
+          left,
+          right,
+          top,
+          bottom,
+          maxWidth: maxWidth * 2,
+          maxHeight: maxHeight * 2
+        }, {
+          headers: {
+            accessToken: this.$token
+          }
+        });
+        if (res.data.code == 0) {
+          this.taskId = res.data.data.taskId;
+          this.interval = setInterval(async () => {
+            let result = await this.checkResult();
+            if (result) {
+              clearInterval(this.interval);
+              this.loading = false;
+              this.workspaceSrc = result;
+            }
+          }, 2000);
+        } else {
+          this.loading = false;
+          // message.warning(res.data.message)
+        }
+      } catch (error) {
+        this.loading = false;
+        // message.warning('请重新尝试')
+      }
+    },
+    handleOk() {
+      this.$emit("update:visible", false, this.workspaceSrc);
+    }
+  }
+});
+;// ./src/components/ExpandImg.vue?vue&type=script&lang=js
+ /* harmony default export */ var components_ExpandImgvue_type_script_lang_js = (ExpandImgvue_type_script_lang_js); 
+;// ./node_modules/.pnpm/mini-css-extract-plugin@2.9.2_webpack@5.99.9/node_modules/mini-css-extract-plugin/dist/loader.js??clonedRuleSet-32.use[0]!./node_modules/.pnpm/css-loader@6.11.0_webpack@5.99.9/node_modules/css-loader/dist/cjs.js??clonedRuleSet-32.use[1]!./node_modules/.pnpm/vue-loader@15.11.1_@vue+compiler-sfc@3.5.16_css-loader@6.11.0_webpack@5.99.9__lodash@4.17.21__w7knhy35vnjmebqosxmmnor4uq/node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/.pnpm/postcss-loader@6.2.1_postcss@8.5.6_webpack@5.99.9/node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-32.use[2]!./node_modules/.pnpm/less-loader@8.1.1_less@4.3.0_webpack@5.99.9/node_modules/less-loader/dist/cjs.js??clonedRuleSet-32.use[3]!./node_modules/.pnpm/vue-loader@15.11.1_@vue+compiler-sfc@3.5.16_css-loader@6.11.0_webpack@5.99.9__lodash@4.17.21__w7knhy35vnjmebqosxmmnor4uq/node_modules/vue-loader/lib/index.js??vue-loader-options!./src/components/ExpandImg.vue?vue&type=style&index=0&id=b59d9692&prod&lang=less&scoped=true
 // extracted by mini-css-extract-plugin
 
-;// ./src/components/AIImageExpandResolution.vue?vue&type=style&index=0&id=865c5d88&prod&lang=less&scoped=true
+;// ./src/components/ExpandImg.vue?vue&type=style&index=0&id=b59d9692&prod&lang=less&scoped=true
 
-;// ./src/components/AIImageExpandResolution.vue
+;// ./src/components/ExpandImg.vue
 
 
 
@@ -8443,18 +8798,381 @@ const AIImageExpandResolutionvue_type_script_lang_js_requestUrl = {
 
 /* normalize component */
 
-var AIImageExpandResolution_component = normalizeComponent(
-  components_AIImageExpandResolutionvue_type_script_lang_js,
-  AIImageExpandResolutionvue_type_template_id_865c5d88_scoped_true_render,
-  AIImageExpandResolutionvue_type_template_id_865c5d88_scoped_true_staticRenderFns,
+var ExpandImg_component = normalizeComponent(
+  components_ExpandImgvue_type_script_lang_js,
+  ExpandImgvue_type_template_id_b59d9692_scoped_true_render,
+  ExpandImgvue_type_template_id_b59d9692_scoped_true_staticRenderFns,
   false,
   null,
-  "865c5d88",
+  "b59d9692",
   null
   
 )
 
-/* harmony default export */ var AIImageExpandResolution = (AIImageExpandResolution_component.exports);
+/* harmony default export */ var ExpandImg = (ExpandImg_component.exports);
+;// ./node_modules/.pnpm/thread-loader@3.0.4_webpack@5.99.9/node_modules/thread-loader/dist/cjs.js!./node_modules/.pnpm/babel-loader@8.4.1_@babel+core@7.27.4_webpack@5.99.9/node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/.pnpm/vue-loader@15.11.1_@vue+compiler-sfc@3.5.16_css-loader@6.11.0_webpack@5.99.9__lodash@4.17.21__w7knhy35vnjmebqosxmmnor4uq/node_modules/vue-loader/lib/loaders/templateLoader.js??ruleSet[1].rules[3]!./node_modules/.pnpm/vue-loader@15.11.1_@vue+compiler-sfc@3.5.16_css-loader@6.11.0_webpack@5.99.9__lodash@4.17.21__w7knhy35vnjmebqosxmmnor4uq/node_modules/vue-loader/lib/index.js??vue-loader-options!./src/components/EraserObject.vue?vue&type=template&id=dbae7344&scoped=true
+var EraserObjectvue_type_template_id_dbae7344_scoped_true_render = function render() {
+  var _vm = this,
+    _c = _vm._self._c;
+  return _c('transition', {
+    attrs: {
+      "name": "fade"
+    }
+  }, [_c('div', {
+    directives: [{
+      name: "show",
+      rawName: "v-show",
+      value: _vm.visible,
+      expression: "visible"
+    }],
+    staticClass: "modal-overlay",
+    on: {
+      "click": function ($event) {
+        if ($event.target !== $event.currentTarget) return null;
+        return _vm.handleMask.apply(null, arguments);
+      }
+    }
+  }, [_c('div', {
+    staticClass: "modal-content"
+  }, [_c('div', {
+    staticClass: "modal-header"
+  }, [_vm._v("AI消除")]), _c('div', {
+    staticClass: "modal-body"
+  }, [_c('div', {
+    staticClass: "container",
+    on: {
+      "click": function ($event) {
+        $event.stopPropagation();
+      }
+    }
+  }, [_c('div', {
+    staticClass: "title"
+  }, [_vm._v("*鼠标框选需要消除的部分后,点击开始消除。消除后,点击应用按钮")]), _c('div', {
+    staticClass: "workspace"
+  }, [_c('img', {
+    ref: "imgRef",
+    attrs: {
+      "src": _vm.workspaceSrc
+    }
+  }), _c('canvas', {
+    ref: "canvasRef",
+    staticStyle: {
+      "z-index": "100",
+      "position": "relative"
+    },
+    on: {
+      "mousedown": _vm.startDrawing,
+      "mousemove": _vm.draw,
+      "mouseup": _vm.stopDrawing
+    }
+  })]), _c('div', {
+    staticStyle: {
+      "display": "flex",
+      "justify-content": "center"
+    }
+  }, [_c('div', {
+    staticClass: "button",
+    on: {
+      "click": _vm.clearCanvas
+    }
+  }, [_vm._v("重置框选")]), _c('div', {
+    staticClass: "button",
+    on: {
+      "click": _vm.eraserObject
+    }
+  }, [_vm._v("开始消除")])]), _c('div', {
+    staticClass: "button",
+    on: {
+      "click": _vm.handleOk
+    }
+  }, [_vm._v("应用")])]), _c('transition', {
+    attrs: {
+      "name": "fade"
+    }
+  }, [_c('div', {
+    directives: [{
+      name: "show",
+      rawName: "v-show",
+      value: _vm.loading,
+      expression: "loading"
+    }],
+    staticClass: "spin-mask"
+  }, [_c('div', {
+    staticClass: "spin-loading"
+  }, [_c('span', {
+    staticClass: "line-md--loading-alt-loop"
+  }), _c('div', [_vm._v("加载中...")])])])])], 1)])])]);
+};
+var EraserObjectvue_type_template_id_dbae7344_scoped_true_staticRenderFns = [];
+
+;// ./node_modules/.pnpm/thread-loader@3.0.4_webpack@5.99.9/node_modules/thread-loader/dist/cjs.js!./node_modules/.pnpm/babel-loader@8.4.1_@babel+core@7.27.4_webpack@5.99.9/node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/.pnpm/vue-loader@15.11.1_@vue+compiler-sfc@3.5.16_css-loader@6.11.0_webpack@5.99.9__lodash@4.17.21__w7knhy35vnjmebqosxmmnor4uq/node_modules/vue-loader/lib/index.js??vue-loader-options!./src/components/EraserObject.vue?vue&type=script&lang=js
+
+
+
+const EraserObjectvue_type_script_lang_js_requestUrl = {
+  openTask: `https://apollo.51kandianshi.com/aigc-tools/image-retouch/generate`,
+  checkTask: `https://apollo.51kandianshi.com/aigc-tools/image-retouch/query`
+};
+/* harmony default export */ var EraserObjectvue_type_script_lang_js = ({
+  name: "EraserObject",
+  props: {
+    visible: {
+      type: Boolean,
+      default: false
+    },
+    src: {
+      type: String,
+      default: ""
+    }
+  },
+  data() {
+    return {
+      workspaceSrc: this.src,
+      loading: false,
+      taskId: "",
+      interval: null,
+      imgRef: null,
+      canvasRef: null,
+      ctx: null,
+      offscreenCanvas: null,
+      offscreenCtx: null,
+      drawing: false,
+      startX: 0,
+      startY: 0,
+      currentX: 0,
+      currentY: 0,
+      image: new Image()
+    };
+  },
+  watch: {
+    visible: async function (newVal) {
+      if (newVal) {
+        this.workspaceSrc = this.src;
+        await this.$nextTick();
+        this.ctx = this.$refs.canvasRef.getContext("2d");
+        this.initImage();
+      } else {
+        clearInterval(this.interval);
+      }
+    }
+  },
+  methods: {
+    close() {
+      this.$emit("update:visible", false);
+    },
+    handleMask() {
+      if (this.visible) {
+        this.close();
+      }
+    },
+    initImage() {
+      this.image.src = this.workspaceSrc;
+      this.image.onload = () => {
+        this.$refs.canvasRef.width = this.$refs.imgRef.width;
+        this.$refs.canvasRef.height = this.$refs.imgRef.height;
+        this.offscreenCanvas = document.createElement("canvas");
+        this.offscreenCanvas.width = this.$refs.canvasRef.width;
+        this.offscreenCanvas.height = this.$refs.canvasRef.height;
+        this.offscreenCtx = this.offscreenCanvas.getContext("2d");
+      };
+    },
+    startDrawing(event) {
+      this.drawing = true;
+      this.startX = event.offsetX;
+      this.startY = event.offsetY;
+      this.currentX = event.offsetX;
+      this.currentY = event.offsetY;
+    },
+    draw(event) {
+      if (!this.drawing) return;
+      this.currentX = event.offsetX;
+      this.currentY = event.offsetY;
+      this.ctx.clearRect(0, 0, this.$refs.canvasRef.width, this.$refs.canvasRef.height); // Clear canvas
+      this.ctx.drawImage(this.offscreenCanvas, 0, 0);
+      this.drawRect(this.ctx, this.startX, this.startY, this.currentX - this.startX, this.currentY - this.startY);
+    },
+    drawRect(ctx, x, y, width, height, fill = false) {
+      ctx.setLineDash([5, 5]);
+      ctx.strokeStyle = "rgba(104, 106, 237, 1)"; // 保持边框颜色不变
+      ctx.lineWidth = 2;
+      if (fill) {
+        ctx.fillStyle = "rgba(104, 106, 237, 0.4)"; // 保持填充颜色不变
+        ctx.fillRect(x, y, width, height);
+      }
+      ctx.strokeRect(x, y, width, height);
+      ctx.setLineDash([]);
+    },
+    stopDrawing() {
+      if (!this.drawing) return;
+      this.drawing = false;
+      this.drawRect(this.offscreenCtx, this.startX, this.startY, this.currentX - this.startX, this.currentY - this.startY, true);
+      this.ctx.clearRect(0, 0, this.$refs.canvasRef.width, this.$refs.canvasRef.height); // Clear canvas
+      this.ctx.drawImage(this.offscreenCanvas, 0, 0);
+    },
+    clearCanvas() {
+      this.ctx.clearRect(0, 0, this.$refs.canvasRef.width, this.$refs.canvasRef.height);
+      this.offscreenCtx.clearRect(0, 0, this.offscreenCanvas.width, this.offscreenCanvas.height);
+    },
+    async checkResult() {
+      if (this.taskId == "") {
+        return;
+      }
+      try {
+        const res = await lib_axios.get(`${EraserObjectvue_type_script_lang_js_requestUrl.checkTask}?taskId=${this.taskId}`, {
+          headers: {
+            accessToken: this.$token
+          }
+        });
+        if (res.data.code == 0 && res.data.data.status == 1) {
+          return res.data.data.fileUrl;
+        } else if (res.data.code == 0 && res.data.data.status == 2) {
+          // message.warning('生成失败，请重新尝试')
+          this.loading = false;
+          clearInterval(this.interval);
+          return false;
+        }
+      } catch (error) {
+        this.loading = false;
+        clearInterval(this.interval);
+        // message.warning('请重新尝试')
+      }
+    },
+    async eraserObject() {
+      let md5 = await this.getImageMd5(this.workspaceSrc);
+      this.loading = true;
+      let maskFile = this.buildBase64();
+      try {
+        const res = await lib_axios.post(EraserObjectvue_type_script_lang_js_requestUrl.openTask, {
+          sourceFileUrl: this.workspaceSrc,
+          sourceMd5: md5,
+          maskFile
+        }, {
+          headers: {
+            accessToken: this.$token
+          }
+        });
+        if (res.data.code == 0) {
+          this.taskId = res.data.data.taskId;
+          this.interval = setInterval(async () => {
+            let result = await this.checkResult();
+            if (result) {
+              clearInterval(this.interval);
+              this.loading = false;
+              this.clearCanvas();
+              this.workspaceSrc = result;
+            }
+          }, 2000);
+        } else {
+          this.loading = false;
+          // message.warning(res.data.message)
+        }
+      } catch (error) {
+        this.loading = false;
+        // message.warning('请重新尝试')
+      }
+    },
+    handleOk() {
+      this.$emit("update:visible", false, this.workspaceSrc);
+    },
+    async getImageMd5(url) {
+      try {
+        // 使用 fetch 下载图片作为 blob
+        const response = await fetch(url);
+        if (!response.ok) {
+          throw new Error(`HTTP error! status: ${response.status}`);
+        }
+        const blob = await response.blob();
+
+        // 将 blob 转换为 ArrayBuffer
+        const arrayBuffer = await blob.arrayBuffer();
+        const uint8Array = new Uint8Array(arrayBuffer);
+
+        // 计算 MD5 值
+        const spark = new (spark_md5_default()).ArrayBuffer();
+        spark.append(uint8Array);
+        const md5Hash = spark.end();
+        console.log("图片的 MD5 值:", md5Hash);
+        return md5Hash;
+      } catch (error) {
+        console.error("获取图片 MD5 值时出错:", error);
+      }
+    },
+    buildBase64() {
+      // 获取原始图片的宽高
+      const originalWidth = this.$refs.imgRef.naturalWidth;
+      const originalHeight = this.$refs.imgRef.naturalHeight;
+
+      // 获取当前Canvas的宽高
+      const canvasWidth = this.$refs.canvasRef.width;
+      const canvasHeight = this.$refs.canvasRef.height;
+
+      // 比例因子
+      const scaleX = originalWidth / canvasWidth;
+      const scaleY = originalHeight / canvasHeight;
+
+      // 创建一个新Canvas元素
+      const canvasBase64 = document.createElement("canvas");
+      const canvasBase64Ctx = canvasBase64.getContext("2d");
+      canvasBase64.width = originalWidth;
+      canvasBase64.height = originalHeight;
+      canvasBase64Ctx.fillStyle = "black";
+      canvasBase64Ctx.fillRect(0, 0, canvasBase64.width, canvasBase64.height);
+
+      // 将现有Canvas上的图形按比例绘制到新Canvas上
+      canvasBase64Ctx.scale(scaleX, scaleY);
+      canvasBase64Ctx.drawImage(this.$refs.canvasRef, 0, 0);
+      canvasBase64Ctx.scale(1 / scaleX, 1 / scaleY); // 还原缩放
+
+      // 遍历像素数据，将非黑色区域改为白色
+      const imageData = canvasBase64Ctx.getImageData(0, 0, canvasBase64.width, canvasBase64.height);
+      const data = imageData.data;
+      for (let i = 0; i < data.length; i += 4) {
+        const red = data[i];
+        const green = data[i + 1];
+        const blue = data[i + 2];
+        const alpha = data[i + 3];
+
+        // 检查是否是非黑色区域
+        if (!(red === 0 && green === 0 && blue === 0)) {
+          data[i] = 255; // 改为白色
+          data[i + 1] = 255;
+          data[i + 2] = 255;
+          data[i + 3] = 255; // 完全不透明
+        }
+      }
+      canvasBase64Ctx.putImageData(imageData, 0, 0);
+      return canvasBase64.toDataURL("image/png").replace("data:image/png;base64,", "");
+    }
+  }
+});
+;// ./src/components/EraserObject.vue?vue&type=script&lang=js
+ /* harmony default export */ var components_EraserObjectvue_type_script_lang_js = (EraserObjectvue_type_script_lang_js); 
+;// ./node_modules/.pnpm/mini-css-extract-plugin@2.9.2_webpack@5.99.9/node_modules/mini-css-extract-plugin/dist/loader.js??clonedRuleSet-32.use[0]!./node_modules/.pnpm/css-loader@6.11.0_webpack@5.99.9/node_modules/css-loader/dist/cjs.js??clonedRuleSet-32.use[1]!./node_modules/.pnpm/vue-loader@15.11.1_@vue+compiler-sfc@3.5.16_css-loader@6.11.0_webpack@5.99.9__lodash@4.17.21__w7knhy35vnjmebqosxmmnor4uq/node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/.pnpm/postcss-loader@6.2.1_postcss@8.5.6_webpack@5.99.9/node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-32.use[2]!./node_modules/.pnpm/less-loader@8.1.1_less@4.3.0_webpack@5.99.9/node_modules/less-loader/dist/cjs.js??clonedRuleSet-32.use[3]!./node_modules/.pnpm/vue-loader@15.11.1_@vue+compiler-sfc@3.5.16_css-loader@6.11.0_webpack@5.99.9__lodash@4.17.21__w7knhy35vnjmebqosxmmnor4uq/node_modules/vue-loader/lib/index.js??vue-loader-options!./src/components/EraserObject.vue?vue&type=style&index=0&id=dbae7344&prod&lang=less&scoped=true
+// extracted by mini-css-extract-plugin
+
+;// ./src/components/EraserObject.vue?vue&type=style&index=0&id=dbae7344&prod&lang=less&scoped=true
+
+;// ./src/components/EraserObject.vue
+
+
+
+;
+
+
+/* normalize component */
+
+var EraserObject_component = normalizeComponent(
+  components_EraserObjectvue_type_script_lang_js,
+  EraserObjectvue_type_template_id_dbae7344_scoped_true_render,
+  EraserObjectvue_type_template_id_dbae7344_scoped_true_staticRenderFns,
+  false,
+  null,
+  "dbae7344",
+  null
+  
+)
+
+/* harmony default export */ var EraserObject = (EraserObject_component.exports);
 ;// ./src/utils/theme.js
 function hexToHSL(hex) {
   let r = parseInt(hex.slice(1, 3), 16) / 255;
@@ -8520,7 +9238,9 @@ function lighten(hex, amount) {
 
 
 
-const components = [AIImageMatting, AIImageExpandResolution];
+
+
+const components = [ImageMatting, ExpandResolution, ExpandImg, EraserObject];
 
 // 暴露安装方法和组件
 const ImageProcessing = function (Vue, options = {}) {