Generate image using HTML5 canvas and SVG
Fork from html-to-image
pnpm add egami
npm i egami
import { dom2png } from 'egami'
dom2png(document.querySelector('#app')).then(png => {
const img = new Image()
img.src = png
document.body.appendChild(img)
})
<!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>
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;
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
}
FAQs
Generate image using HTML5 canvas and SVG
The npm package egami receives a total of 0 weekly downloads. As such, egami popularity was classified as not popular.
We found that egami demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Multiple high-impact npm maintainers confirm they have been targeted in the same social engineering campaign that compromised Axios.
Security News
Axios compromise traced to social engineering, showing how attacks on maintainers can bypass controls and expose the broader software supply chain.
Security News
Node.js has paused its bug bounty program after funding ended, removing payouts for vulnerability reports but keeping its security process unchanged.