Feature：富文本模式导出改为使用html2canvas转换整个svg

web/src/lang/en_us.js

@@ -90,7 +90,7 @@ export default {
     pdfFile: 'pdf file',
     markdownFile: 'markdown file',
     tips: 'tips: .smm and .json file can be import',
-    domToImage: 'Whether to convert rich text nodes in svg into pictures',
+    isTransparent: 'Background is transparent',
     pngTips: 'tips: Exporting pictures in rich text mode is time-consuming. It is recommended to export to svg format',
     svgTips: 'tips: Exporting pictures in rich text mode is time-consuming',
     transformingDomToImages: 'Converting nodes: ',

web/src/lang/zh_cn.js

@@ -90,7 +90,7 @@ export default {
     pdfFile: 'pdf文件',
     markdownFile: 'markdown文件',
     tips: 'tips：.smm和.json文件可用于导入',
-    domToImage: '是否将svg中富文本节点转换成图片',
+    isTransparent: '背景是否透明',
     pngTips: 'tips：富文本模式导出图片非常耗时，建议导出为svg格式',
     svgTips: 'tips：富文本模式导出图片非常耗时',
     transformingDomToImages: '正在转换节点：',

web/src/pages/Edit/components/Export.vue

@@ -23,12 +23,6 @@
           style="margin-left: 12px"
           >{{ $t('export.include') }}</el-checkbox
         >
-        <el-checkbox
-          v-show="['svg'].includes(exportType)"
-          v-model="domToImage"
-          style="margin-left: 12px"
-          >{{ $t('export.domToImage') }}</el-checkbox
-        >
       </div>
       <div class="paddingInputBox" v-show="['svg', 'png', 'pdf'].includes(exportType)">
         <span class="name">{{ $t('export.paddingX') }}</span>
@@ -45,6 +39,12 @@
           size="mini"
           @change="onPaddingChange"
         ></el-input>
+        <el-checkbox
+          v-show="['png'].includes(exportType)"
+          v-model="isTransparent"
+          style="margin-left: 12px"
+          >{{ $t('export.isTransparent') }}</el-checkbox
+        >
       </div>
       <div class="downloadTypeList">
         <div 
@@ -62,7 +62,6 @@
         </div>
       </div>
       <div class="tip">{{ $t('export.tips') }}</div>
-      <div class="tip warning" v-if="openNodeRichText && ['png', 'pdf'].includes(exportType)">{{ $t('export.pngTips') }}</div>
       <div class="tip warning" v-if="openNodeRichText && exportType === 'svg' && domToImage">{{ $t('export.svgTips') }}</div>
     </div>
     <span slot="footer" class="dialog-footer">
@@ -91,7 +90,7 @@ export default {
       exportType: 'smm',
       fileName: '思维导图',
       widthConfig: true,
-      domToImage: false,
+      isTransparent: false,
       loading: false,
       loadingText: '',
       paddingX: 10,
@@ -111,13 +110,6 @@ export default {
     this.$bus.$on('showExport', () => {
       this.dialogVisible = true
     })
-    this.$bus.$on('transforming-dom-to-images', (index, len) => {
-      this.loading = true
-      this.loadingText = `${this.$t('export.transformingDomToImages')}${index + 1}/${len}`
-      if (index >= len - 1) {
-        this.loading = false
-      }
-    })
   },
   methods: {
     onPaddingChange() {
@@ -148,14 +140,13 @@ export default {
           this.exportType,
           true,
           this.fileName,
-          this.domToImage,
           `* {
             margin: 0;
             padding: 0;
             box-sizing: border-box;
           }`
         )
-      } else {
+      } else if (['smm', 'json'].includes(this.exportType)) {
         this.$bus.$emit(
           'export',
           this.exportType,
@@ -163,6 +154,21 @@ export default {
           this.fileName,
           this.widthConfig
         )
+      } else if (this.exportType === 'png') {
+        this.$bus.$emit(
+          'export',
+          this.exportType,
+          true,
+          this.fileName,
+          this.isTransparent
+        )
+      } else {
+        this.$bus.$emit(
+          'export',
+          this.exportType,
+          true,
+          this.fileName
+        )
       }
       this.$notify.info({
         title: this.$t('export.notifyTitle'),