src/renderer/src/components/pdf/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="canvasitem">
-    <div class="pdfAdnFabric">
+    <div class="pdfAdnFabric" id="pdfAdnFabric">
       <canvas id="pdf-fabric"></canvas>
       <canvas id="pdf-fabric1" v-if="props.pdfObj.numberOfPdf == 2"></canvas>
     </div>
@@ -67,19 +67,34 @@ const renderPage = async (canvasobj) => {
     img.onload = () => {
       // 在这里执行图像加载完成后的操作
       // 根据传过来的pdf对象 判断改渲染哪一个fabric
+      var screenWidth = window.innerWidth/2-10;
+      var screenHeight = window.innerHeight;
+      // 计算图像的原始宽度和高度
+      var imgWidth = img.width;
+      var imgHeight = img.height;
+      // 计算图像的缩放比例以适应屏幕
+      var widthRatio = screenWidth / imgWidth;
+      var heightRatio = screenHeight / imgHeight;
+      //选择较小的缩放比例以确保图像完全适应屏幕
+      var scaleRatio = Math.min(widthRatio, heightRatio);
+         // 计算缩放后的图像尺寸
+      var targetWidth = imgWidth * scaleRatio;
+      var targetHeight = imgHeight * scaleRatio;
+
       if (props.pdfObj.numberOfPdf == 2) {
         if (canvasobj.index == 0) {
-          fabriccanvas.value.setWidth(img.width)
+        
-          fabriccanvas.value.setHeight(img.height)
+          fabriccanvas.value.setWidth(targetWidth)
+          fabriccanvas.value.setHeight(targetHeight)
           displayData(fabriccanvas, canvsStore, canvasobj, fabric, img)
         } else {
-          fabriccanvas1.value.setWidth(img.width)
+          fabriccanvas1.value.setWidth(targetWidth)
-          fabriccanvas1.value.setHeight(img.height)
+          fabriccanvas1.value.setHeight(targetHeight)
           displayData(fabriccanvas1, canvsStore, canvasobj, fabric, img)
         }
       } else {
-        fabriccanvas.value.setWidth(img.width)
+        fabriccanvas.value.setWidth(targetWidth)
-        fabriccanvas.value.setHeight(img.height)
+        fabriccanvas.value.setHeight(targetHeight)
         displayData(fabriccanvas, canvsStore, canvasobj, fabric, img)
       }
       // console.log(imgarr.value)