egami → image
Generate image using HTML5 canvas and SVG
Fork from html-to-image
Installation
pnpm
pnpm add egaminpm
npm i egamiUsage
Basic
import { dom2png } from 'egami'
dom2png(document.querySelector('#app')).then(png => {
const img = new Image()
img.src = png
document.body.appendChild(img)
})CDN of usage
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>egami → image</title>
<script src="https://cdn.jsdelivr.net/npm/egami/dist/egami.js"></script>
<script>
window.onload = async () => {
document.body.appendChild(
await window.egami.dom2image(document.querySelector('body > *')),
)
}
</script>
</head>
<body>
<div>egami → image</div>
</body>
</html>All convert
declare function canvas2blob(canvas: HTMLCanvasElement, options?: BlobOptions): Promise<Blob | null>;
declare function dom2blob<T extends Node>(node: T, options?: Options & BlobOptions): 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 dom2jpeg<T extends Node>(node: T, options?: Options & JpegOptions): Promise<string>;
declare function dom2pixel<T extends Node>(node: T, options?: Options): Promise<Uint8ClampedArray>;
declare function dom2png<T extends Node>(node: T, options?: Options): Promise<string>;
declare function dom2svg<T extends Node>(node: T, options?: Options): Promise<SVGElement>;
declare function image2canvas<T extends HTMLImageElement>(image: T, options?: Options): Promise<HTMLCanvasElement>;
declare function svg2canvas<T extends SVGElement>(svg: T, options?: Options): Promise<HTMLCanvasElement>;
declare function svg2image<T extends SVGElement>(svg: T): HTMLImageElement;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
/**
* 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
}