📸 Generate image using HTML5 canvas and SVG

Overview

egami → image

License Version

README | 中文文档

Generate image using HTML5 canvas and SVG

Fork from html-to-image

Installation

pnpm

pnpm add egami

npm

npm i egami

Usage

import { dom2png } from 'egami'

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

All converts

declare function canvas2blob(canvas: HTMLCanvasElement, options?: Options): Promise<Blob | null>;
declare function dom2blob<T extends Node>(node: T, options?: Options): Promise<Blob | null>;
declare function dom2canvas<T extends Node>(node: T, options?: Options): Promise<HTMLCanvasElement>;
declare function dom2image<T extends Node>(node: T, options?: Options): Promise<HTMLImageElement>;
declare function dom2png<T extends Node>(node: T, options?: Options): Promise<string>;
declare function dom2jpeg<T extends Node>(node: T, options?: Options): Promise<string>;
declare function dom2pixel<T extends Node>(node: T, options?: Options): Promise<Uint8ClampedArray>;
declare function dom2svg<T extends Node>(node: T, options?: Options): Promise<SVGSVGElement>;
declare function svg2canvas<T extends SVGElement>(svg: T, options?: Options): Promise<HTMLCanvasElement>;

Options

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
  }
}
You might also like...

Canvas rendering library, Sprite manipulation of canvas

el-canvas Canvas rendering library, Sprite manipulation of canvas hello world div id="app"div/div/div yarn add elem-canvas or npm i

Apr 13, 2022

Flat, round, designer-friendly pseudo-3D engine for canvas & SVG

Zdog Round, flat, designer-friendly pseudo-3D engine View complete documentation and live demos at zzz.dog. Install Download zdog.dist.min.js minified

Jan 3, 2023

🍞🎨 Full-featured photo image editor using canvas. It is really easy, and it comes with great filters.

🍞🎨 Full-featured photo image editor using canvas. It is really easy, and it comes with great filters.

Full featured image editor using HTML5 Canvas. It's easy to use and provides powerful filters. Packages toast-ui.image-editor - Plain JavaScript compo

Jan 6, 2023

🔥 JavaScript Library for HTML5 canvas based heatmaps

🔥 JavaScript Library for HTML5 canvas based heatmaps

heatmap.js Dynamic Heatmaps for the Web. How to get started The fastest way to get started is to install heatmap.js with bower. Just run the following

Jan 2, 2023

Financial lightweight charts built with HTML5 canvas

Lightweight Charts Demos | Documentation | Discord community TradingView Lightweight Charts are one of the smallest and fastest financial HTML5 charts

Jan 9, 2023

An HTML5/Canvas implementation of 8-bit color cycling

An HTML5/Canvas implementation of 8-bit color cycling

Overview Here is the JavaScript and C++ source code to my color cycling engine, written in 2010. I am releasing it under the LGPL v3.0. The package co

Dec 1, 2022

Generate an image of all your Github contributions

Generate an image of all your Github contributions

GitHub Contribution Chart Generator Generates an image of all your GitHub contributions since you have signed up, so you can use it in social media. T

Jan 2, 2023

Interactive visualizations of time series using JavaScript and the HTML canvas tag

Interactive visualizations of time series using JavaScript and the HTML canvas tag

dygraphs JavaScript charting library The dygraphs JavaScript library produces interactive, zoomable charts of time series: Learn more about it at dygr

Jan 3, 2023

Beautiful React SVG maps with d3-geo and topojson using a declarative api.

react-simple-maps Create beautiful SVG maps in react with d3-geo and topojson using a declarative api. Read the docs, or check out the examples. Why R

Dec 29, 2022
Owner
weng
Convention over configuration
weng
📸 Generate image using HTML5 canvas and SVG

egami → image README | 中文文档 Generate image using HTML5 canvas and SVG Fork from html-to-image Installation pnpm pnpm add egami npm npm i egami Usage i

weng 12 Jan 3, 2023
HTML5 Canvas Gauge. Tiny implementation of highly configurable gauge using pure JavaScript and HTML5 canvas. No dependencies. Suitable for IoT devices because of minimum code base.

HTML Canvas Gauges v2.1 Installation Documentation Add-Ons Special Thanks License This is tiny implementation of highly configurable gauge using pure

Mykhailo Stadnyk 1.5k Dec 30, 2022
Konva.js is an HTML5 Canvas JavaScript framework that extends the 2d context by enabling canvas interactivity for desktop and mobile applications.

Konva Konva is an HTML5 Canvas JavaScript framework that enables high performance animations, transitions, node nesting, layering, filtering, caching,

konva 8.7k Jan 8, 2023
Demonstration of liquid effect on HTML Canvas using Matter.js and SVG Filters (Blur + Contrast)

Canvas Liquid Effect Demonstration of liquid (or gooey) effect on HTML Canvas using Matter.js and SVG Filters (feGaussianBlur and feColorMatrix). DEMO

Utkarsh Verma 78 Dec 24, 2022
React + Canvas = Love. JavaScript library for drawing complex canvas graphics using React.

React Konva React Konva is a JavaScript library for drawing complex canvas graphics using React. It provides declarative and reactive bindings to the

konva 4.9k Jan 9, 2023
The Swiss Army Knife of Vector Graphics Scripting – Scriptographer ported to JavaScript and the browser, using HTML5 Canvas. Created by @lehni & @puckey

Paper.js - The Swiss Army Knife of Vector Graphics Scripting If you want to work with Paper.js, simply download the latest "stable" version from http:

Paper.js 13.5k Dec 30, 2022
An implementation of Bézier curve rendering and manipulation, using the HTML5 Canvas API.

Bézier Curves An implementation of Bézier curve rendering and manipulation, using the HTML5 Canvas API. How does it work? Bézier curves can be simply

nethe550 1 Apr 13, 2022
Simple HTML5 Charts using the tag

Simple yet flexible JavaScript charting for designers & developers Documentation Currently, there are two versions of the library (2.9.4 and 3.x.x). V

Chart.js 59.4k Jan 7, 2023
Bring data to life with SVG, Canvas and HTML. :bar_chart::chart_with_upwards_trend::tada:

D3: Data-Driven Documents D3 (or D3.js) is a JavaScript library for visualizing data using web standards. D3 helps you bring data to life using SVG, C

D3 103.8k Jan 3, 2023
JavaScript SVG parser and renderer on Canvas

canvg JavaScript SVG parser and renderer on Canvas. It takes the URL to the SVG file or the text of the SVG file, parses it in JavaScript and renders

null 3.3k Jan 4, 2023