From 8e5b4b226d5c27c1e596fbf2f21b97978d6a8442 Mon Sep 17 00:00:00 2001
From: pengjun <158915633@qq.com>
Date: Thu, 26 Sep 2024 17:26:19 +0800
Subject: [PATCH] cut

---
 src/components/doctorCheck/CheckPicture.vue |   4 +-
 src/components/doctorCheck/PacsCutPic.vue   | 101 +++++++++++++-------
 2 files changed, 68 insertions(+), 37 deletions(-)

diff --git a/src/components/doctorCheck/CheckPicture.vue b/src/components/doctorCheck/CheckPicture.vue
index ec4c3bc..b541823 100644
--- a/src/components/doctorCheck/CheckPicture.vue
+++ b/src/components/doctorCheck/CheckPicture.vue
@@ -498,7 +498,7 @@ export default {
     },
 
     // 裁图/修图/
-    btnCutPic() {
+    btnCutPicBak() {
 
       
       this.dialogWinCutPic = true
@@ -509,7 +509,7 @@ export default {
 
     },
 
-    btnCutPicBak() {
+    btnCutPic() {
       if (this.checkPictures.length == 0) {
         this.$message.warning({ showClose: true, message: "暂无可裁图片！" });
         return;
diff --git a/src/components/doctorCheck/PacsCutPic.vue b/src/components/doctorCheck/PacsCutPic.vue
index 908ebfb..ca0dd91 100644
--- a/src/components/doctorCheck/PacsCutPic.vue
+++ b/src/components/doctorCheck/PacsCutPic.vue
@@ -36,29 +36,29 @@
                             @onChooseImg="onChooseImg" @onClearAll="onClearAll" @onPrintImg="onPrintImg"
                             @error="catchError" @cutDown="cutDown">
                             <template #open></template>
-                            <template #choose v-if="params.isModal == false"> </template>
+                            <template #choose v-if="params.isModal == false"></template>
                             <template #cancel v-if="params.isModal == false"> </template>
                             <template #confirm v-if="params.isModal == false"> </template>
                         </ImgCutter>
                     </div>
                     <div class="col-md-3">
                         <div class="imgCutDownBox" :style="'height:458px;'">
-                            <div class="imgCutDownBoxContainer">
-                                <img :src="imgSrc" v-if="!!imgSrc" alt="" />
+                            <div class="imgCutDownBoxContainer" style="z-index: 2;">
+                                <img :src="imgSrc" v-if="!!imgSrc" alt="" style="z-index: 3000;"/>
                                 <span v-else class="imgCutDownTips">{{ 'block3.title8' }}</span>
                             </div>
 
                             <div class="text-center">
                                 <a :class="'btn btn-light' + (imgSrc ? '' : ' disabled')" :disabled="!imgSrc"
                                     :href="imgSrc" :download="downloadName || 'image.jpg'" role="button">{{
-                                    'block3.title7' }}</a>
+                                        '下载图片' }}</a>
                             </div>
                         </div>
                     </div>
                     <div class="col-md-3">
                         <form>
                             <div class="form-group">
-                                <label for="cutImgSrc"> {{ 'block3.title1' }}：</label>
+                                <label for="cutImgSrc"> {{ '远程图片地址' }}：</label>
                                 <input type="text" name="cutImgSrc" class="form-control" @input="catchInput($event)"
                                     :value="cutImgSrc" placeholder="Remote pictures src" />
                             </div>
@@ -67,26 +67,25 @@
                                     @click="pluginExe('chooseImg')">
                                     {{ params.label }}
                                 </div>
-                                <div class="btn btn-primary btn-block" v-if="params.isModal === true"
-                                    @click="pluginExe('handleOpen')">
-                                    {{ params.label }}
-                                </div>
+                                <el-button type="danger" class="commonbutton" v-if="params.isModal === true"
+                                    @click="pluginExe('handleOpen')">{{ params.label }}</el-button>
+
                             </div>
                             <div class="form-group">
                                 <div class="btn btn-secondary btn-block" @click="forIe9">
-                                    {{ 'block3.title3' }}
+                                    {{ '裁剪远程图片' }}
                                 </div>
                             </div>
                             <div class="form-group">
                                 <button type="button" :disabled="params.isModal === true || loadImg === false"
                                     class="btn btn-success btn-block" @click="pluginExe('cropPicture')">
-                                    {{'block3.title5' }}
+                                    {{ '确定' }}
                                 </button>
                             </div>
                             <div class="form-group">
                                 <button type="button" class="btn btn-light btn-block"
                                     :disabled="params.isModal === true" @click="pluginExe('clearAll')">
-                                    {{ 'block3.title6' }}
+                                    {{ '重置' }}
                                 </button>
                             </div>
                         </form>
@@ -107,8 +106,8 @@ export default {
         ImgCutter,
     },
     data() {
-        return {           
-            cutImgSrc: 'https://phpcrm-oss.oss-cn-chengdu.aliyuncs.com/weixinpay.png',
+        return {
+            cutImgSrc: 'http://192.168.2.74:9529/PacsCheckPictureImg/pacs/2024/8/29/3a141f59-cf4c-5e34-966d-aec0a0eea94c/2408010001_0005.jpg.jpg',
             cutImgWidth: 250,
             cutImgHeight: 250,
             imgSrc: null,
@@ -118,7 +117,7 @@ export default {
             loadImg: false,
             onPrintImgTimmer: null,
             params: {
-                label: 'block3.title9',
+                label: '选择本地文件',
                 fileType: 'jpeg',
                 crossOrigin: true,
                 crossOriginHeader: '*',
@@ -151,21 +150,10 @@ export default {
                 accept: 'image/gif, image/jpeg ,image/png',
             },
             code1: '',
-            code2:
-                '\n' +
-                '// ' +
-                'block3.title4' +
-                '\n' +
-                'forIe9:() => {\n' +
-                '   this.$refs.imgCutterModal.handleOpen({\n' +
-                '       name:1.png,\n' +
-                '       src:http://imgurl.com/1.png,\n' +
-                '   });\n' +
-                '}',
         };
     },
     created() {
-        
+
     },
     mounted() {
         let $imgCutterBox = this.$refs.imgCutterBox;
@@ -180,14 +168,24 @@ export default {
             this.imgSrc = res.dataURL;
             this.downloadName = res.fileName;
         },
+
         forIe9: function () {
-            this.$refs.imgCutterModal.handleOpen({
-                name: this.cutImgSrc,
-                src: this.cutImgSrc,
-                // width: this.cutImgWidth,
-                // height: this.cutImgHeight,
-            });
+            this.convertImageToBase64(this.cutImgSrc)
+                .then(src => {
+                    this.$refs.imgCutterModal.handleOpen({
+                        name: this.cutImgSrc,
+                        src
+                        //src: this.cutImgSrc,
+                        // width: this.cutImgWidth,
+                        // height: this.cutImgHeight,
+                    });
+                })
+                .catch(err => {
+                    this.$message.error({showClose:true,message:err})
+                })
+
         },
+
         doRefresh: function () {
             this.refresh = false;
             this.$nextTick(() => {
@@ -196,8 +194,10 @@ export default {
         },
         onClearAll: function () {
             // 清空事件
-            this.loadImg = false;
-            this.imgSrc = '';
+            // this.loadImg = false;
+            // this.imgSrc = '';
+            console.log('this.imgSrc',this.imgSrc)
+
         },
         onPrintImg: function (res) {
             // 预览图片
@@ -310,6 +310,37 @@ export default {
                 '</div>\n' +
                 '</ImgCutter>';
         },
+
+        convertImageToBase64: function (url) {
+            return new Promise((resolve, reject) => {
+                // 创建新的Image对象
+                const img = new Image();
+                // 设置跨域访问
+                img.crossOrigin = 'Anonymous';
+                // 图片加载完成
+                img.onload = () => {
+                    // 创建canvas元素
+                    const canvas = document.createElement('canvas');
+                    const ctx = canvas.getContext('2d');
+                    // 设置canvas宽高
+                    canvas.width = img.width;
+                    canvas.height = img.height;
+                    // 将图片绘制到canvas上
+                    ctx.drawImage(img, 0, 0);
+                    // 将canvas内容转换为Base64编码的字符串
+                    const dataURL = canvas.toDataURL('image/png');
+                    resolve(dataURL);
+                };
+                // 图片加载失败
+                img.onerror = (error) => {
+                    reject(error);
+                };
+                // 设置图片源
+                img.src = url;
+            });
+        },
+
+
         setData: function ($event) {
             function isNumber(val) {
                 let regPos = /^\d+(\.\d+)?$/; //非负浮点数