Przeglądaj źródła

fix: 优化印章生成清晰度与显示比例

yusheng 2 miesięcy temu
rodzic
commit
4ad5acbd96
1 zmienionych plików z 18 dodań i 16 usunięć
  1. 18 16
      src/components/addDoc/seal.vue

+ 18 - 16
src/components/addDoc/seal.vue

@@ -819,9 +819,10 @@
         }
 
         try {
-          // 使用 html2canvas 进行转换
+          // 使用 html2canvas 进行转换,scale: 2 提高清晰度
+          const scale = 2;
           const canvas = await html2canvas(targetElement, {
-            scale: 1, // 1倍分辨率,避免过大
+            scale: scale, // 2倍分辨率,提高清晰度
             backgroundColor: '#ffffff',
             useCORS: true, // 尝试跨域图片
             logging: false,
@@ -839,9 +840,9 @@
           const outputCanvas = document.getElementById('outputCanvas');
           outputCanvas.width = canvas.width;
           outputCanvas.height = canvas.height;
-          // 移除内联样式,使用实际像素尺寸
-          outputCanvas.style.width = canvas.width + 'px';
-          outputCanvas.style.height = canvas.height + 'px';
+          // 使用原始尺寸(去除scale倍数),保持显示比例
+          outputCanvas.style.width = (canvas.width / scale) + 'px';
+          outputCanvas.style.height = (canvas.height / scale) + 'px';
           const ctx = outputCanvas.getContext('2d');
           ctx.clearRect(0, 0, outputCanvas.width, outputCanvas.height);
           ctx.drawImage(canvas, 0, 0);
@@ -881,21 +882,23 @@
         }
 
         try {
-          const imgData = outputCanvas.toDataURL('image/png');
-          // 使用 Canvas 的 CSS 尺寸(显示尺寸),而不是内部像素尺寸
-          const canvasWidth =
+          // 使用 Canvas 的 CSS 尺寸(显示尺寸)
+          const cssWidth =
             parseFloat(outputCanvas.style.width) || outputCanvas.width;
-          const canvasHeight =
+          const cssHeight =
             parseFloat(outputCanvas.style.height) || outputCanvas.height;
 
+          // 获取高清图片数据,使用最高质量
+          const imgData = outputCanvas.toDataURL('image/png', 1.0);
+
           // 创建 PDF 实例,横向或纵向根据 Canvas 尺寸决定
-          const orientation = canvasWidth > canvasHeight ? 'l' : 'p';
-          // 使用 'mm' 单位,并根据 96 DPI 转换为毫米
-          // 96 DPI 下:1px = 25.4 / 96 mm ≈ 0.2646 mm
+          const orientation = cssWidth > cssHeight ? 'l' : 'p';
+          // 使用 'mm' 单位,并根据 CSS 尺寸转换为毫米(保持显示比例)
+          // 屏幕 DPI 约 96,1px = 25.4 / 96 mm ≈ 0.2646 mm
           const DPI = 96;
           const pxToMm = 25.4 / DPI;
-          const pdfWidth = canvasWidth * pxToMm;
-          const pdfHeight = canvasHeight * pxToMm;
+          const pdfWidth = cssWidth * pxToMm;
+          const pdfHeight = cssHeight * pxToMm;
 
           const pdf = new jsPDF(orientation, 'mm', [pdfWidth, pdfHeight]);
 
@@ -935,13 +938,12 @@
           if (!targetElement) return;
 
           const newCanvas = await html2canvas(targetElement, {
-            scale: 1,
+            scale: 2,
             backgroundColor: '#ffffff',
             useCORS: true,
             logging: false,
             allowTaint: false,
             imageTimeout: 5000,
-            width: 1000,
             windowWidth: targetElement.scrollWidth,
             windowHeight: targetElement.scrollHeight
           });