Dynamically create images using code or JSX and render to any format
- Types
- ESM
- License
- MIT
- Install Size
- 349.1 kB(7.4 MB)
- Vulns
- 9
- Published
$
npm install abstract-image$
pnpm add abstract-image$
yarn add abstract-image$
bun add abstract-image$
deno add npm:abstract-image$
vlt install abstract-image$
vp add abstract-imageWeekly DownloadsAcross all versions
13.0.34
latest
- base64-js^1.5.1
- fast-xml-parserView vulnerabilities^4.5.0 (1 vulnerability)
- handlebarsView vulnerabilities4.7.8 (8 vulnerabilities)
- handlebars-xml^0.4.3
- iconv-lite^0.7.2
- jsxpression^0.1.33
abstract-image
Dynamically create images using code or JSX and render to any format
Introduction
Sometimes you need to create an image dynamically, for example when dynamically generating schematics etc. This library makes that easy by providing tools to create an abstract representation of an image which can then be turned into a concrete format such as .png, .svg etc.
Installation
npm install --save abstract-document
The library is compiled to ES5 and no polyfills are required.
Usage
import * as React from "react";
import * as AbstractImage from "abstract-image";
export function AbstractImageExample() {
const components = [
AbstractImage.createLine(
AbstractImage.createPoint(25, 25),
AbstractImage.createPoint(80, 60),
AbstractImage.black,
2
),
AbstractImage.createRectangle(
AbstractImage.createPoint(10, 50),
AbstractImage.createPoint(40, 80),
AbstractImage.blue,
2,
AbstractImage.fromArgb(100, 0, 0, 0)
),
AbstractImage.createRectangle(
AbstractImage.createPoint(60, 50),
AbstractImage.createPoint(90, 80),
AbstractImage.blue,
2,
AbstractImage.transparent
),
];
const image = AbstractImage.createAbstractImage(
AbstractImage.createPoint(0, 0),
AbstractImage.createSize(400, 400),
AbstractImage.white,
components
);
const svg = AbstractImage.createSVG(image);
return (
<div>
<h1>Svg</h1>
<p>Test</p>
<pre>{svg}</pre>
<img width="400" height="400" src={`data:image/svg+xml;,${svg}`} />
</div>
);
}dummy