{"id":19592787,"url":"https://github.com/tharunoptimus/placeholder-image-data-url","last_synced_at":"2026-04-22T23:35:44.840Z","repository":{"id":57325450,"uuid":"396428683","full_name":"tharunoptimus/placeholder-image-data-url","owner":"tharunoptimus","description":"Source Code of the npm package","archived":false,"fork":false,"pushed_at":"2021-08-19T12:27:19.000Z","size":24,"stargazers_count":0,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-10-03T15:52:17.281Z","etag":null,"topics":["buffer","canvas","npm","placeholder"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/placeholder-image-data-url","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/tharunoptimus.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-08-15T17:13:18.000Z","updated_at":"2021-08-19T12:33:08.000Z","dependencies_parsed_at":"2022-09-09T05:51:12.850Z","dependency_job_id":null,"html_url":"https://github.com/tharunoptimus/placeholder-image-data-url","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/tharunoptimus/placeholder-image-data-url","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tharunoptimus%2Fplaceholder-image-data-url","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tharunoptimus%2Fplaceholder-image-data-url/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tharunoptimus%2Fplaceholder-image-data-url/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tharunoptimus%2Fplaceholder-image-data-url/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tharunoptimus","download_url":"https://codeload.github.com/tharunoptimus/placeholder-image-data-url/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tharunoptimus%2Fplaceholder-image-data-url/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32159959,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-22T17:06:48.269Z","status":"ssl_error","status_checked_at":"2026-04-22T17:06:19.037Z","response_time":58,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["buffer","canvas","npm","placeholder"],"created_at":"2024-11-11T08:37:00.969Z","updated_at":"2026-04-22T23:35:44.823Z","avatar_url":"https://github.com/tharunoptimus.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"## Placeholder Image Data URL\n\n## Install\n`npm install placeholder-image-data-url`\n\n\n## Usage\n\n### Parameters\n- width: `Number` : width of the image\n- height: `Number` : height of the image\n- color: `HEX Color` : color of the image\n- text: `String` : text to display on the image\n\n### Example\n```js\n// app.js\nconst express = require(\"express\");\nconst app = express();\nconst port = process.env.PORT || 3003;\nconst getDataURL = require('placeholder-image-data-url');\n\nconst server = app.listen(port, () =\u003e\n\tconsole.log(\"Server Listening on \" + port)\n);\n\napp.get(\"/:width/:height/:text/:color\", async (req, res) =\u003e {\n    let width = req.params.width;  // Width of the image\n    let height = req.params.height; // Height of the image\n    let text = req.params.text;     // Text to be written on the image\n    let color = req.params.color;  // Color of the image\n    color = '#' + color;\n\n    if (!width || !width.match(/^\\d+$/)) return res.status(400).send(\"Width must be a number\");\n    if (!height || !height.match(/^\\d+$/)) return res.status(400).send(\"Height must be a number\");\n    if (!color || !color.match(/^#[0-9a-f]{6}$/i)) return res.status(400).send(\"Color must be a hex color\");\n\n    let dataURL = await getDataURL(width, height, text, color);\n    let image = Buffer.from(dataURL.split(\",\")[1], \"base64\")\n\n    res.writeHead(200, {\n        \"Content-Type\": \"image/png\",\n        \"Content-Length\": image.length,\n    });\n    res.end(image);\n})\n```\n\n### Output\n\n- Access the page at `http://localhost:3003/150/150/meow/444444\n\n![](https://raw.githubusercontent.com/tharunoptimus/placeholder-image-data-url/main/output.png)\n\n## Dependencies\n- [canvas](https://www.npmjs.com/package/canvas) for the image generation\n\n## Note\n- This module is not meant to be used for generating the images as image files or image response. \n- It is meant to be used for generating the image data URL.\n- Look at the [example](#example) for more details on how you can generate the image as an API response.\n\n## Keywords\n- placeholder\n- image\n- data url\n- canvas\n\n## Enjoy 🎉\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftharunoptimus%2Fplaceholder-image-data-url","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftharunoptimus%2Fplaceholder-image-data-url","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftharunoptimus%2Fplaceholder-image-data-url/lists"}