Feat:提升导出的图片和pdf在高清屏的清晰度

simple-mind-map/src/constants/defaultOptions.js

@@ -166,5 +166,7 @@ export const defaultOpt = {
     }
   `,
   // 开启鼠标双击复位思维导图位置及缩放
-  enableDblclickReset: true
+  enableDblclickReset: true,
+  // 导出图片时canvas的缩放倍数，该配置会和window.devicePixelRatio值取最大值
+  minExportImgCanvasScale: 2
 }

simple-mind-map/src/plugins/Export.js

@@ -65,37 +65,35 @@ class Export {
       img.setAttribute('crossOrigin', 'anonymous')
       img.onload = async () => {
         try {
-          let canvas = document.createElement('canvas')
+          const canvas = document.createElement('canvas')
+          const dpr = Math.max(window.devicePixelRatio, this.mindMap.opt.minExportImgCanvasScale)
+          const imgWidth = img.width
+          const imgHeight = img.height
           // 如果宽比高长，那么旋转90度
-          let needRotate = checkRotate(img.width, img.height)
+          const needRotate = checkRotate(imgWidth, imgHeight)
           if (needRotate) {
-            canvas.width = img.height
+            canvas.width = imgHeight * dpr
-            canvas.height = img.width
+            canvas.height = imgWidth * dpr
+            canvas.style.width = imgHeight + 'px'
+            canvas.style.height = imgWidth + 'px'
           } else {
-            canvas.width = img.width
+            canvas.width = imgWidth * dpr
-            canvas.height = img.height
+            canvas.height = imgHeight * dpr
+            canvas.style.width = imgWidth + 'px'
+            canvas.style.height = imgHeight + 'px'
           }
-          let ctx = canvas.getContext('2d')
+          const ctx = canvas.getContext('2d')
+          ctx.scale(dpr, dpr)
           if (needRotate) {
             ctx.rotate(0.5 * Math.PI)
-            ctx.translate(0, -img.height)
+            ctx.translate(0, -imgHeight)
           }
           // 绘制背景
           if (!transparent) {
-            await this.drawBackgroundToCanvas(ctx, img.width, img.height)
+            await this.drawBackgroundToCanvas(ctx, imgWidth, imgHeight)
           }
           // 图片绘制到canvas里
-          ctx.drawImage(
+          ctx.drawImage(img, 0, 0, imgWidth, imgHeight)
-            img,
-            0,
-            0,
-            img.width,
-            img.height,
-            0,
-            0,
-            img.width,
-            img.height
-          )
           resolve(canvas.toDataURL())
         } catch (error) {
           reject(error)