fix(snippets): use 'dom-to-image' instead 'html2canvas' #297 (#317)

Author: antonreshetov

package.json

@@ -50,11 +50,11 @@
     "codemirror": "^5.65.7",
     "codemirror-textmate": "^1.1.0",
     "date-fns": "^2.28.0",
+    "dom-to-image": "^2.6.0",
     "electron-store": "^8.0.1",
     "floating-vue": "^2.0.0-beta.17",
     "fs-extra": "^10.0.1",
     "highlight.js": "^11.5.1",
-    "html2canvas": "^1.4.1",
     "i18next": "^21.8.14",
     "i18next-fs-backend": "^1.1.4",
     "interactjs": "^1.10.11",
@@ -83,6 +83,7 @@
     "@commitlint/config-conventional": "^15.0.0",
     "@tsconfig/node14": "^1.0.1",
     "@types/codemirror": "^5.60.5",
+    "@types/dom-to-image": "^2.6.4",
     "@types/estree": "^0.0.51",
     "@types/i18next-fs-backend": "^1.1.2",
     "@types/lowdb": "^1.0.11",

pnpm-lock.yaml

@@ -94,23 +94,19 @@
         </div>
       </div>
     </PerfectScrollbar>
-    <div
-      ref="previewRef"
-      class="preview"
-    />
   </div>
 </template>
 
 <script setup lang="ts">
 import { useAppStore } from '@/store/app'
 import hljs from 'highlight.js'
-import html2canvas from 'html2canvas'
 import interact from 'interactjs'
 import { computed, onMounted, ref, watch } from 'vue'
 import { useHljsTheme } from '@/composable'
 import { store, track, i18n } from '@/electron'
 import { useSnippetStore } from '@/store/snippets'
 import { useMagicKeys } from '@vueuse/core'
+import domToImage from 'dom-to-image'
 
 const GUTTER_RIGHT_OFFSET = 10
 const GUTTER_WIDTH = 8
@@ -131,7 +127,6 @@ const { escape } = useMagicKeys()
 
 const frameRef = ref<HTMLElement>()
 const snippetRef = ref<HTMLElement>()
-const previewRef = ref<HTMLElement>()
 const gutterRef = ref<HTMLElement>()
 
 const gutterWidth = ref(GUTTER_WIDTH + 'px')
@@ -180,17 +175,13 @@ const init = () => {
 }
 
 const onSaveScreenshot = async () => {
-  const canvas = await html2canvas(snippetRef.value!, {
-    backgroundColor: null
-  })
-  previewRef.value?.appendChild(canvas)
+  const data = await domToImage.toPng(snippetRef.value!)
 
   const a = document.createElement('a')
-  const img = canvas.toDataURL('image/png')
-
-  a.href = img
+  a.href = data
   a.download = `${props.name}.png`
   a.click()
+
   track('snippets/create-screenshot')
 }