generate-image
1.0.1 • Public • Published Generate Image
Generate images in browser and node.
Installation and Usage
npm install --save generate-image
In Browser
import GenerateImage from 'generate-image';
or
<script src="path/to/generate-image.min.js"></script>
1. Automatic:
<img src="" data-gi="w=300&h=150&c='Hello World'">
<script>
document.addEventListener('load', () => {
GenerateImage.auto('data-gi');
});
</script>
2. Programmatic:
const target = document.getElementById('image-target');
const imageData = GenerateImage({
w: 300,
h: 150,
t: 'diagonal',
c: 'Hello World',
});
target.src = imageData;
In Node
const GenerateImage = require('generate-image');
const imageData = GenerateImage({
w: 300,
h: 150,
});
API
GenerateImage.auto(attr)
| argument |
required |
default |
info |
| attr |
- |
'data-gi' |
data attr that provide option string for <img> |
GenerateImage(options, encode)
| argument |
required |
default |
info |
| options |
- |
- |
options |
| encode |
- |
true |
return dataURI or pure xml |
options
| argument |
required |
default |
info |
| w |
- |
300 |
width |
| h |
- |
150 |
height |
| bc |
- |
'#F2F2F6' |
background color |
| fc |
- |
'#666' |
foreground color |
| t |
- |
'' |
texture: 'diagonal' |
| c |
- |
'' |
text content |
SVG template
<svg
version="1.1"
baseProfile="full"
width="{ w }"
height="{ h }"
viewBox="0 0 { w } { h }"
xmlns="http://www.w3.org/2000/svg">
<rect
width="100%"
height="100%"
fill="{ bc }" />
<line
x1="0"
y1="0"
x2="{ w }"
y2="{ h }"
stroke="{ fc }"
stroke-width="1"
stroke-opacity="0.6" />
<line
x1="0"
y1="{ h }"
x2="{ w }"
y2="0"
stroke="{ fc }"
stroke-width="1"
stroke-opacity="0.6" />
<text
x="{ w / 2 }"
y="{ h / 2 }"
text-anchor="middle"
fill="{ fc }">{ c }</text>
</svg>
License
MIT
Package Sidebar
Install
Weekly Downloads