feat: integrate useHtml2Image composable

auto-imports.d.ts

@@ -192,6 +192,7 @@ declare global {
   const useFullscreen: typeof import('@vueuse/core')['useFullscreen']
   const useGamepad: typeof import('@vueuse/core')['useGamepad']
   const useGeolocation: typeof import('@vueuse/core')['useGeolocation']
+  const useHtml2Image: typeof import('./src/composables/common/useHtml2Image/useHtml2Image')['useHtml2Image']
   const useI18n: typeof import('vue-i18n')['useI18n']
   const useIdle: typeof import('@vueuse/core')['useIdle']
   const useImage: typeof import('@vueuse/core')['useImage']
@@ -508,6 +509,7 @@ declare module 'vue' {
     readonly useFullscreen: UnwrapRef<typeof import('@vueuse/core')['useFullscreen']>
     readonly useGamepad: UnwrapRef<typeof import('@vueuse/core')['useGamepad']>
     readonly useGeolocation: UnwrapRef<typeof import('@vueuse/core')['useGeolocation']>
+    readonly useHtml2Image: UnwrapRef<typeof import('./src/composables/common/useHtml2Image/useHtml2Image')['useHtml2Image']>
     readonly useI18n: UnwrapRef<typeof import('vue-i18n')['useI18n']>
     readonly useIdle: UnwrapRef<typeof import('@vueuse/core')['useIdle']>
     readonly useImage: UnwrapRef<typeof import('@vueuse/core')['useImage']>

package.json

@@ -27,6 +27,7 @@
     "fuse.js": "^6.6.2",
     "mitt": "^3.0.0",
     "mockjs": "^1.1.0",
+    "modern-screenshot": "^4.4.26",
     "naive-ui": "^2.34.4",
     "nprogress": "^0.2.0",
     "pinia": "^2.1.4",

src/composables/common/useHtml2Image/useHtml2Image.ts

@@ -0,0 +1,13 @@
+import { useDownloadFile } from '@flypeng/tool/browser'
+import { domToPng } from 'modern-screenshot'
+
+export const useHtml2Image = async (element: Element, name: string) => {
+  const width = element.scrollWidth
+  const height = element.scrollWidth
+  const imageUrl = await domToPng(element, {
+    width, height, quality: 1, scale: 2,
+  })
+  const image = new Image(width, height)
+  image.src = imageUrl
+  await useDownloadFile(imageUrl, name)
+}

src/locales/cn.json

@@ -14,6 +14,7 @@
     "commonTable": "基础表格",
     "commonImagePreview": "图片预览",
     "commonDraggable": "拖拽组件",
+    "commonHtml2Image": "网页截图",
     "commonGuide": "引导页",
     "commonClipboard": "剪贴板",
     "commonDocs": "文档",

src/locales/en.json

@@ -15,6 +15,7 @@
     "commonImagePreview": "Image Preview",
     "commonClipboard": "Clipboard",
     "commonDraggable": "Draggable",
+    "commonHtml2Image": "Html2Image",
     "commonGuide": "Introductory Page",
     "commonDocs": "Docs",
     "commonMultilevelMenu": "Multilevel Menu",

src/locales/kr.json

@@ -14,6 +14,7 @@
     "commonTable": "기본 테이블",
     "commonImagePreview": "이미지 미리보기",
     "commonDraggable": "구성 요소 드래그",
+    "commonHtml2Image": "홈페이지 캡처",
     "commonGuide": "소개 페이지",
     "commonClipboard": "클립보드",
     "commonDocs": "문서",

src/router/modules/constant-routes.ts

@@ -173,6 +173,15 @@ export const CONSTANT_ROUTES: VAdmireRoute[] = [
           icon: 'mdi:drag-variant',
         },
       },
+      {
+        path: 'html2canvas',
+        name: 'Feature_Html2Image',
+        component: '~/views/features/Html2Image.vue',
+        meta: {
+          text: '$t("route.commonHtml2Image")',
+          icon: 'mdi:file-image',
+        },
+      },
       {
         path: '',
         name: 'GuideIndex',

src/views/features/Html2Image.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+
+const pageScreenshot = () => {
+  const body = document.querySelector('body')
+  body && useHtml2Image(body, '页面截图')
+}
+
+const menuScreenshot = () => {
+  const menu = document.querySelector('.n-layout-content')
+  menu && useHtml2Image(menu, '菜单截图')
+}
+
+</script>
+
+<template>
+  <div class="space-x-1">
+    <NButton
+      type="primary"
+      @click="pageScreenshot"
+    >
+      页面截图
+    </NButton>
+
+    <NButton
+      type="info"
+      @click="menuScreenshot"
+    >
+      菜单截图
+    </NButton>
+  </div>
+</template>