downloadCanvas

将 DOM 元素转换为 canvas 并下载为图片。

@movk-repo/shared/utils/vue/download-canvas

参数

import type { Options as CanvasOptions } from 'html2canvas'

interface DownloadOptions {
  fileName: string
  fileType: 'image/png' | 'image/jpeg' | 'image/webp'
}

interface DownloadCanvasParams {
  dom: HTMLElement
  canvasOptions?: Partial<CanvasOptions>
  downloadOptions?: Partial<DownloadOptions>
}

function downloadCanvas(params: DownloadCanvasParams): void

dom

需要转换为画布的 DOM 元素。

• 类型: HTMLElement
• 必填: true

canvasOptions

html2canvas 的配置选项。

• 类型: Partial<CanvasOptions>
• 必填: false

downloadOptions

下载相关的配置选项。

• 类型: Partial<DownloadOptions>
• 必填: false
• 包含以下属性:
  • fileName: 文件名，默认为 'canvas'
    • 类型: string
    • 必填: false
    • 默认值: 'canvas'
  • fileType: 文件类型，支持 png/jpeg/webp，默认为 'image/png'
    • 类型: 'image/png' | 'image/jpeg' | 'image/webp'
    • 必填: false
    • 默认值: 'image/png'

示例

import { downloadCanvas } from '@movk-repo/shared'

// 基本用法
downloadCanvas({
  dom: document.getElementById('chart')
})

// 自定义配置
downloadCanvas({
  dom: document.getElementById('chart'),
  canvasOptions: { scale: 2 },
  downloadOptions: {
    fileName: 'my-chart',
    fileType: 'image/jpeg'
  }
})