Demo：节点右键菜单新增导出为图片按钮

web/src/lang/en_us.js

@@ -98,7 +98,8 @@ export default {
     removeHyperlink: 'Remove hyperlink',
     removeNote: 'Remove note',
     removeCustomStyles: 'Remove custom styles',
-    removeAllNodeCustomStyles: 'Remove all node custom styles'
+    removeAllNodeCustomStyles: 'Remove all node custom styles',
+    exportNodeToPng: 'Export node to png'
   },
   count: {
     words: 'Words',

web/src/lang/zh_cn.js

@@ -98,7 +98,8 @@ export default {
     removeHyperlink: '移除超链接',
     removeNote: '移除备注',
     removeCustomStyles: '一键去除自定义样式',
-    removeAllNodeCustomStyles: '一键去除所有节点自定义样式'
+    removeAllNodeCustomStyles: '一键去除所有节点自定义样式',
+    exportNodeToPng: '导出该节点为图片'
   },
   count: {
     words: '字数',

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

@@ -91,6 +91,9 @@
       <div class="item" @click="exec('REMOVE_CUSTOM_STYLES')">
         <span class="name">{{ $t('contextmenu.removeCustomStyles') }}</span>
       </div>
+      <div class="item" @click="exec('EXPORT_CUR_NODE_TO_PNG')">
+        <span class="name">{{ $t('contextmenu.exportNodeToPng') }}</span>
+      </div>
     </template>
     <template v-if="type === 'svg'">
       <div class="item" @click="exec('RETURN_CENTER')">
@@ -139,6 +142,7 @@
 
 <script>
 import { mapState, mapMutations } from 'vuex'
+import { getTextFromHtml } from 'simple-mind-map/src/utils'
 
 /**
  * @Author: 王林
@@ -342,6 +346,15 @@ export default {
         case 'REMOVE_NOTE':
           this.node.setNote('')
           break
+        case 'EXPORT_CUR_NODE_TO_PNG':
+          this.mindMap.export(
+            'png',
+            true,
+            getTextFromHtml(this.node.getData('text')),
+            false,
+            this.node
+          )
+          break
         default:
           this.$bus.$emit('execCommand', key, ...args)
           break