DOM 截图试试 egami

egami → image

License Version

README | 中文文档

使用 HTML5 canvas 和 SVG 生成图像

Fork from html-to-image

安装

pnpm

pnpm add egami

npm

npm i egami

使用

import { dom2png } from 'egami'

dom2png(document.querySelector('#app')).then(png => {
  const img = new Image()
  img.src = png
  document.body.appendChild(img)
})

所有转换

function canvas2blob(canvas: HTMLCanvasElement, options?: Options): Promise<Blob | null>;

function dom2blob<T extends Node>(node: T, options?: Options): Promise<Blob | null>;

function dom2canvas<T extends Node>(node: T, options?: Options): Promise<HTMLCanvasElement>;

function dom2image<T extends Node>(node: T, options?: Options): Promise<HTMLImageElement>;

function dom2png<T extends Node>(node: T, options?: Options): Promise<string>;

function dom2jpeg<T extends Node>(node: T, options?: Options): Promise<string>;

function dom2pixel<T extends Node>(node: T, options?: Options): Promise<Uint8ClampedArray>;

function dom2svg<T extends Node>(node: T, options?: Options): Promise<SVGSVGElement>;

function svg2canvas<T extends SVGElement>(svg: T, options?: Options): Promise<HTMLCanvasElement>;

选项

export interface Options {
  /**
   * Width in pixels to be applied to node before rendering.
   */
  width?: number

  /**
   * Height in pixels to be applied to node before rendering.
   */
  height?: number

  /**
   * The pixel ratio of captured image. Defalut is the actual pixel ratio of
   * the device. Set 1 to use as initial-scale 1 for the image
   */
  scale?: number

  /**
   * A string value for the background color, any valid CSS color value.
   */
  backgroundColor?: string

  /**
   * A string indicating the image format. The default type is image/png; that type is also used if the given type isn't supported.
   */
  type?: string

  /**
   * A number between `0` and `1` indicating image quality (e.g. 0.92 => 92%)
   * of the JPEG image.
   */
  quality?: number

  /**
   * An object whose properties to be copied to node's style before rendering.
   */
  style?: Partial<CSSStyleDeclaration>

  /**
   * A function taking DOM node as argument. Should return `true` if passed
   * node should be included in the output. Excluding node means excluding
   * it's children as well.
   */
  filter?: (el: Node) => boolean

  /**
   * Maximum canvas size (pixels).
   *
   * default: 16384
   */
  maximumCanvasSize?: number

  /**
   * Global window
   */
  window?: any

  /**
   * Fetch resources
   */
  fetch?: {
    /**
     * the second parameter of window.fetch RequestInit
     */
    requestInit?: RequestInit

    /**
     * Set to `true` to append the current time as a query string to URL
     * requests to enable cache busting.
     */
    bypassingCache?: boolean

    /**
     * A data URL for a placeholder image that will be used when fetching
     * an image fails. Defaults to an empty string and will render empty
     * areas for failed images.
     */
    placeholderImage?: string
  }

  /**
   * Fonts download and embed.
   */
  font?: false | {
    /**
     * The preferred font format. If specified all other font formats are ignored.
     */
    preferredFormat?: 'woff' | 'woff2' | 'truetype' | 'opentype' | 'embedded-opentype' | 'svg' | string

    /**
     * A CSS string to specify for font embeds. If specified only this CSS will
     * be present in the resulting image.
     */
    css?: string
  }
}
本作品采用《CC 协议》,转载必须注明作者和本文链接
讨论数量: 0
(= ̄ω ̄=)··· 暂无内容!

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容,与人为善,比聪明更重要!