feat(utils): add image download & lint

Author: YunYouJun

Diff for: package.json

@@ -22,14 +22,15 @@
     "typecheck": "tsc --noEmit"
   },
   "devDependencies": {
-    "@antfu/eslint-config": "^0.34.0",
-    "@types/node": "^18.11.18",
+    "@antfu/eslint-config": "^0.38.2",
+    "@types/html2canvas": "^1.0.0",
+    "@types/node": "^18.15.11",
     "@yunlefun/vueuse": "workspace:*",
-    "bumpp": "^8.2.1",
-    "eslint": "^8.31.0",
+    "bumpp": "^9.1.0",
+    "eslint": "^8.37.0",
     "typescript": "^4.8.3",
-    "unbuild": "^1.0.2",
-    "vite": "^4.0.4",
-    "vitest": "^0.26.3"
+    "unbuild": "^1.2.0",
+    "vite": "^4.2.1",
+    "vitest": "^0.29.8"
   }
 }

Diff for: packages/utils/build.config.ts

@@ -9,4 +9,7 @@ export default defineBuildConfig({
   rollup: {
     emitCJS: true,
   },
+  externals: [
+    'html2canvas',
+  ],
 })

Diff for: packages/utils/package.json

@@ -50,5 +50,8 @@
     "release": "bumpp && npm publish",
     "test": "vitest",
     "typecheck": "tsc --noEmit"
+  },
+  "peerDependencies": {
+    "html2canvas": "*"
   }
 }

Diff for: packages/utils/src/image/html2canvas.ts

@@ -0,0 +1,20 @@
+import html2canvas from 'html2canvas'
+
+/**
+ * screenshot to base64
+ * @param container
+ * @returns
+ */
+export async function screenShotToBase64(containerEl: HTMLElement): Promise<string | void> {
+  return new Promise((resolve) => {
+    html2canvas(containerEl, {
+      height: containerEl.clientHeight - 2,
+      useCORS: true,
+    }).then((canvas) => {
+      const base64 = canvas.toDataURL()
+      resolve(base64)
+    }).catch(() => {
+      resolve()
+    })
+  })
+}

Diff for: packages/utils/src/image/index.ts

@@ -0,0 +1,16 @@
+export * from './html2canvas'
+
+export function getImagesOptions(images: Record<string, string>) {
+  return Object.entries(images).map(([_key, image]) => ({ src: image }))
+}
+
+/**
+ * 将 DataUrl 下载为图片
+ * @param dataUrl
+ */
+export function downloadDataUrlAsImage(dataUrl: string, filename: string) {
+  const link = document.createElement('a')
+  link.href = dataUrl
+  link.download = filename
+  link.click()
+}

Diff for: packages/utils/src/index.ts

@@ -1,2 +1,3 @@
 export * from './types'
 export * from './wx'
+export * from './image'

Diff for: packages/utils/src/wx/helpers.ts

@@ -2,6 +2,6 @@
  * 是否在微信浏览器环境
  * @returns
  */
-export const isInWxBrowser = () => {
+export function isInWxBrowser() {
   return /MicroMessenger/.test(navigator.userAgent)
 }

Diff for: packages/utils/src/wx/jsApi/share.ts

@@ -35,7 +35,7 @@ export interface RegisterWxShareOptions extends WxShareInfo {
  * @param options
  * @returns
  */
-export const registerWxShare = (shareOptions: RegisterWxShareOptions) => {
+export function registerWxShare(shareOptions: RegisterWxShareOptions) {
   const wx = window.wx
 
   // 需在用户可能点击分享按钮前就先调用

Diff for: packages/utils/src/wx/register.ts

@@ -13,7 +13,7 @@ export interface WxInitOptions {
  * @param options
  * @returns
  */
-export const createWx = (options: WxInitOptions) => {
+export function createWx(options: WxInitOptions) {
   if (!isClient)
     return
 

Diff for: packages/vueuse/package.json

@@ -59,7 +59,7 @@
     "@yunlefun/utils": "workspace:*"
   },
   "devDependencies": {
-    "@vueuse/core": "^9.10.0",
-    "vue": "^3.2.45"
+    "@vueuse/core": "^9.13.0",
+    "vue": "^3.2.47"
   }
 }