Feat:修改导出图片方法的参数,导出pdf时如果思维导图尺寸小于a4纸那么不旋转方向

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

@@ -342,4 +342,10 @@ export const ERROR_TYPES = {
   LOAD_CLIPBOARD_IMAGE_ERROR: 'load_clipboard_image_error',
   BEFORE_TEXT_EDIT_ERROR: 'before_text_edit_error',
   EXPORT_ERROR: 'export_error'
+}
+
+// a4纸的宽高
+export const a4Size = {
+  width: 592.28,
+  height: 841.89
 }

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

@@ -7,6 +7,7 @@ import {
 import { SVG } from '@svgdotjs/svg.js'
 import drawBackgroundImageToCanvas from '../utils/simulateCSSBackgroundInCanvas'
 import { transformToMarkdown } from '../parse/toMarkdown'
+import { a4Size } from '../constants/constant'
 
 //  导出插件
 class Export {
@@ -57,7 +58,7 @@ class Export {
   }
 
   //   svg转png
-  svgToPng(svgSrc, transparent, rotateWhenWidthLongerThenHeight = false) {
+  svgToPng(svgSrc, transparent, checkRotate = () => { return false }) {
     return new Promise((resolve, reject) => {
       const img = new Image()
       // 跨域图片需要添加这个属性，否则画布被污染了无法导出图片
@@ -66,8 +67,7 @@ class Export {
         try {
           let canvas = document.createElement('canvas')
           // 如果宽比高长，那么旋转90度
-          let needRotate =
+          let needRotate = checkRotate(img.width, img.height)
-            rotateWhenWidthLongerThenHeight && img.width / img.height > 1
           if (needRotate) {
             canvas.width = img.height
             canvas.height = img.width
@@ -179,7 +179,7 @@ class Export {
    * 方法1.把svg的图片都转化成data:url格式，再转换
    * 方法2.把svg的图片提取出来再挨个绘制到canvas里，最后一起转换
    */
-  async png(name, transparent = false, rotateWhenWidthLongerThenHeight) {
+  async png(name, transparent = false, checkRotate) {
     let { node, str } = await this.getSvgData()
     str = removeHTMLEntities(str)
     // 如果开启了富文本，则使用htmltocanvas转换为图片
@@ -195,7 +195,7 @@ class Export {
       // let imgDataUrl = await this.svgToPng(
       //   res,
       //   transparent,
-      //   rotateWhenWidthLongerThenHeight
+      //   checkRotate
       // )
       // return imgDataUrl
     }
@@ -209,7 +209,7 @@ class Export {
     let res = await this.svgToPng(
       svgUrl,
       transparent,
-      rotateWhenWidthLongerThenHeight
+      checkRotate
     )
     return res
   }
@@ -219,7 +219,10 @@ class Export {
     if (!this.mindMap.doExportPDF) {
       throw new Error('请注册ExportPDF插件')
     }
-    let img = await this.png('', false, true)
+    let img = await this.png('', false, (width, height) => {
+      if (width <= a4Size.width && height && a4Size.height) return false
+      return (width / height) > 1
+    })
     this.mindMap.doExportPDF.pdf(name, img, useMultiPageExport)
   }
 

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

@@ -1,4 +1,5 @@
 import JsPDF from 'jspdf'
+import { a4Size } from '../constants/constant'
 
 //  导出PDF插件，需要通过Export插件使用
 class ExportPDF {
@@ -19,29 +20,27 @@ class ExportPDF {
   // 单页导出
   onePageExport(name, img) {
     let pdf = new JsPDF('', 'pt', 'a4')
-    let a4Width = 595
+    let a4Ratio = a4Size.width / a4Size.height
-    let a4Height = 841
-    let a4Ratio = a4Width / a4Height
     let image = new Image()
     image.onload = () => {
       let imageWidth = image.width
       let imageHeight = image.height
       let imageRatio = imageWidth / imageHeight
       let w, h
-      if (imageWidth <= a4Width && imageHeight <= a4Height) {
+      if (imageWidth <= a4Size.width && imageHeight <= a4Size.height) {
         // 使用图片原始宽高
         w = imageWidth
         h = imageHeight
       } else if (a4Ratio > imageRatio) {
         // 以a4Height为高度，缩放图片宽度
-        w = imageRatio * a4Height
+        w = imageRatio * a4Size.height
-        h = a4Height
+        h = a4Size.height
       } else {
         // 以a4Width为宽度，缩放图片高度
-        w = a4Width
+        w = a4Size.width
-        h = a4Width / imageRatio
+        h = a4Size.width / imageRatio
       }
-      pdf.addImage(img, 'PNG', (a4Width - w) / 2, (a4Height - h) / 2, w, h)
+      pdf.addImage(img, 'PNG', (a4Size.width - w) / 2, (a4Size.height - h) / 2, w, h)
       pdf.save(name)
     }
     image.src = img
@@ -50,20 +49,18 @@ class ExportPDF {
   // 多页导出
   multiPageExport(name, img) {
     let image = new Image()
-    const a4Width = 592.28
-    const a4Height = 841.89
     image.onload = () => {
       let imageWidth = image.width
       let imageHeight = image.height
       // 一页pdf显示高度
-      let pageHeight = (imageWidth / a4Width) * a4Height
+      let pageHeight = (imageWidth / a4Size.width) * a4Size.height
       // 未生成pdf的高度
       let leftHeight = imageHeight
       // 偏移
       let position = 0
       // a4纸的尺寸[595.28,841.89]，图片在pdf中图片的宽高
-      let imgWidth = a4Width
+      let imgWidth = a4Size.width
-      let imgHeight = (a4Width / imageWidth) * imageHeight
+      let imgHeight = (a4Size.width / imageWidth) * imageHeight
       let pdf = new JsPDF('', 'pt', 'a4')
       // 有两个高度需要区分，一个是图片的实际高度，和生成pdf的页面高度(841.89)
       // 当内容未超过pdf一页显示的范围，无需分页
@@ -71,8 +68,8 @@ class ExportPDF {
         pdf.addImage(
           img,
           'PNG',
-          (a4Width - imgWidth) / 2,
+          (a4Size.width - imgWidth) / 2,
-          (a4Height - imgHeight) / 2,
+          (a4Size.height - imgHeight) / 2,
           imgWidth,
           imgHeight
         )
@@ -81,7 +78,7 @@ class ExportPDF {
         while (leftHeight > 0) {
           pdf.addImage(img, 'PNG', 0, position, imgWidth, imgHeight)
           leftHeight -= pageHeight
-          position -= a4Height
+          position -= a4Size.height
           // 避免添加空白页
           if (leftHeight > 0) {
             pdf.addPage()