modern-screenshot

使用 HTML5 canvas 和 SVG 生成图像

English | 简体中文

📦 安装

npm i modern-screenshot

🦄 使用

基本用法

import { domToPng } from 'modern-screenshot'

domToPng(document.querySelector('#app')).then(base64 => {
  window.open().document.write(`<img src="${ base64 }" />`)
})

CDN

<script src="https://unpkg.com/modern-screenshot"></script>
<script>
  window.modernScreenshot.domToPng(document.querySelector('body')).then(base64 => {
    window.open().document.write(`<img src="${ base64 }" />`)
  })
</script>

所有转换

declare function canvasToblob(
  canvas: HTMLCanvasElement,
  options?: BlobOptions,
): Promise<Blob | null>;

declare function domToBlob<T extends Node>(
  node: T,
  options?: Options & BlobOptions,
): Promise<Blob | null>;

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

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

declare function domToJpeg<T extends Node>(
  node: T,
  options?: Options & JpegOptions,
): Promise<string>;

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

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

declare function domToSvg<T extends Node>(
  node: T,
  options?: Options,
): Promise<SVGElement>;

declare function imageToCanvas<T extends HTMLImageElement>(
  image: T,
  options?: Options,
): Promise<HTMLCanvasElement>;

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

declare function svgToImage<T extends SVGElement>(
  svg: T,
): HTMLImageElement;

选项

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

  /**
   * 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).
   *
   * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/canvas#maximum_canvas_size
   *
   * default: 16384
   */
  maximumCanvasSize?: number

  /**
   * 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.
     */
    cssText?: string
  }
}

export interface JpegOptions {

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

export interface BlobOptions extends JpegOptions {
  /**
   * 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
}

本作品采用《CC 协议》，转载必须注明作者和本文链接