# placeholder-image-data-url

> Generate Data URL of placeholder images for given width and height

Latest version **1.0.1** (published 2021-08-15) · 0 weekly downloads

## Install

```sh
npm install placeholder-image-data-url
pnpm add placeholder-image-data-url
yarn add placeholder-image-data-url
bun add placeholder-image-data-url
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.1 |
| Published | 2021-08-15 |
| First published | 2021-08-15 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 21.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | tharunoptimus |

## Links

- npm: https://www.npmjs.com/package/placeholder-image-data-url
- Repository: https://github.com/tharunoptimus/placeholder-image-data-url
- Homepage: https://github.com/tharunoptimus/placeholder-image-data-url#readme
- Issues: https://github.com/tharunoptimus/placeholder-image-data-url/issues
- npm.io page: https://npm.io/package/placeholder-image-data-url

## Dependencies (1)

- [canvas](https://npm.io/package/canvas.md) ^2.8.0

## Recent versions

- 1.0.1 (latest) — 2021-08-15
- 1.0.0 — 2021-08-15

## README

## Placeholder Image Data URL

## Install
`npm install placeholder-image-data-url`


## Usage

### Parameters
- width: `Number` : width of the image
- height: `Number` : height of the image
- color: `HEX Color` : color of the image
- text: `String` : text to display on the image

### Example
```js
// app.js
const express = require("express");
const app = express();
const port = process.env.PORT || 3003;
const getDataURL = require('placeholder-image-data-url');

const server = app.listen(port, () =>
	console.log("Server Listening on " + port)
);

app.get("/:width/:height/:text/:color", async (req, res) => {
    let width = req.params.width;  // Width of the image
    let height = req.params.height; // Height of the image
    let text = req.params.text;     // Text to be written on the image
    let color = req.params.color;  // Color of the image
    color = '#' + color;

    if (!width || !width.match(/^\d+$/)) return res.status(400).send("Width must be a number");
    if (!height || !height.match(/^\d+$/)) return res.status(400).send("Height must be a number");
    if (!color || !color.match(/^#[0-9a-f]{6}$/i)) return res.status(400).send("Color must be a hex color");

    let dataURL = await getDataURL(width, height, text, color);
    let image = Buffer.from(dataURL.split(",")[1], "base64")

    res.writeHead(200, {
        "Content-Type": "image/png",
        "Content-Length": image.length,
    });
    res.end(image);
})
```

### Output

- Access the page at `http://localhost:3003/150/150/meow/444444

![](output.png)

## Dependencies
- [canvas](https://www.npmjs.com/package/canvas) for the image generation

## Note
- This module is not meant to be used for generating the images as image files or image response. 
- It is meant to be used for generating the image data URL.
- Look at the [example](#example) for more details on how you can generate the image as an API response.

## Keywords
- placeholder
- image
- data url
- canvas

## Enjoy 🎉

---
_Source: https://npm.io/package/placeholder-image-data-url · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._