cut

src/components/doctorCheck/CheckPicture.vue

@@ -498,7 +498,7 @@ export default {
     },
 
     // 裁图/修图/
-    btnCutPicBak() {
+    btnCutPic() {
 
       
       this.dialogWinCutPic = true
@@ -509,7 +509,7 @@ export default {
 
     },
 
-    btnCutPic() {
+    btnCutPicBak() {
       if (this.checkPictures.length == 0) {
         this.$message.warning({ showClose: true, message: "暂无可裁图片！" });
         return;

src/components/doctorCheck/PacsCutPic.vue

@@ -44,7 +44,7 @@
                     <div class="col-md-3">
                         <div class="imgCutDownBox" :style="'height:458px;'">
                             <div class="imgCutDownBoxContainer" style="z-index: 2;">
-                                <img :src="imgSrc" v-if="!!imgSrc" alt="" style="z-index: 3000;"/>
+                                <img :src="imgSrc" v-if="!!imgSrc" alt="" style="z-index: 3000;" />
                                 <span v-else class="imgCutDownTips">{{ 'block3.title8' }}</span>
                             </div>
 
@@ -93,6 +93,7 @@
                 </div>
             </div>
         </div>
+        <canvas id="myCanvas"></canvas>
     </div>
 </template>
 
@@ -153,6 +154,27 @@ export default {
         };
     },
     created() {
+        // 获取canvas元素
+        // this.$nextTick(() => {
+        //     let canvas = document.getElementById('myCanvas');
+        //     let ctx = canvas.getContext('2d');
+
+        //     // 创建一个新的图片对象
+        //     let img = new Image();
+        //     // 设置图片的源地址
+        //     img.src = this.cutImgSrc
+
+
+        //     // 当图片加载完成时，执行此函数
+        //     img.onload = function () {
+        //         canvas.width = img.width;
+        //         canvas.height = img.height;
+        //         // 在画布上绘制图片
+        //         console.log('img.width,img.height', img.width, img.height)
+
+        //         ctx.drawImage(img, 0, 0); // 参数：图片对象，x坐标，y坐标
+        //     };
+        // })
 
     },
     mounted() {
@@ -181,7 +203,7 @@ export default {
                     });
                 })
                 .catch(err => {
-                    this.$message.error({showClose:true,message:err})
+                    this.$message.error({ showClose: true, message: err })
                 })
 
         },
@@ -196,7 +218,7 @@ export default {
             // 清空事件
             // this.loadImg = false;
             // this.imgSrc = '';
-            console.log('this.imgSrc',this.imgSrc)
+            console.log('this.imgSrc', this.imgSrc)
 
         },
         onPrintImg: function (res) {
@@ -312,6 +334,73 @@ export default {
         },
 
         convertImageToBase64: function (url) {
+            return new Promise((resolve, reject) => {
+                fetch(url, {
+                    method: 'GET',
+                    // mode: 'no-cors',
+                    // headers: {
+                    //     'Content-Type': 'application/json', // 确保这是服务器期望的格式
+                    //     'Authorization': 'Bearer ' + token,
+                    //     'Access-Control-Allow-Origin': '*'
+                    // }
+                })
+                    .then(response => {
+                        if (!response.ok) {
+                            console.log('response',response)
+                            throw new Error('Network response was not ok ' + response.statusText);
+                        }
+                        return response.blob()
+                    })
+                    .then(blob => createImageBitmap(blob))
+                    .then(imageBitmap => {
+                        const canvas = document.createElement('canvas');
+                        const ctx = canvas.getContext('2d');
+                        canvas.width = imageBitmap.width;
+                        canvas.height = imageBitmap.height;
+                        ctx.drawImage(imageBitmap, 0, 0);
+                        const dataUrl = canvas.toDataURL('image/png');
+                        console.log('dataUrl', dataUrl)
+                        resolve(dataUrl)
+                    })
+                    .catch(err => {
+                        reject(err)
+                    })
+            })
+
+        },
+
+        convertImageToBase641: function (url) {
+            this.$nextTick(() => {
+                return new Promise((resolve, reject) => {
+                    let canvas = document.getElementById('myCanvas');
+                    let ctx = canvas.getContext('2d');
+
+                    // 创建一个新的图片对象
+                    let img = new Image();
+                    // 设置跨域访问
+                    // img.crossOrigin = 'Anonymous';
+                    // 设置图片的源地址
+                    img.src = url
+
+                    // 当图片加载完成时，执行此函数
+                    img.onload = function () {
+                        canvas.width = img.width;
+                        canvas.height = img.height;
+                        // 在画布上绘制图片
+                        console.log('img.width,img.height', img.width, img.height)
+
+                        ctx.drawImage(img, 0, 0); // 参数：图片对象，x坐标，y坐标
+                        let dataURL = canvas.toDataURL('image/png');
+                        console.log('dataURL', dataURL)
+                        resolve(dataURL);
+                    };
+                })
+
+            })
+
+        },
+
+        convertImageToBase642: function (url) {
             return new Promise((resolve, reject) => {
                 // 创建新的Image对象
                 const img = new Image();
@@ -320,7 +409,8 @@ export default {
                 // 图片加载完成
                 img.onload = () => {
                     // 创建canvas元素
-                    const canvas = document.createElement('canvas');
+                    // const canvas = document.createElement('canvas');
+                    const canvas = document.getElementById('myCanvas')
                     const ctx = canvas.getContext('2d');
                     // 设置canvas宽高
                     canvas.width = img.width;