{"id":15314004,"url":"https://github.com/vanruesc/blur-up","last_synced_at":"2025-07-22T05:03:04.692Z","repository":{"id":57375450,"uuid":"141068511","full_name":"vanruesc/blur-up","owner":"vanruesc","description":"A tool that creates preview images.","archived":false,"fork":false,"pushed_at":"2025-03-28T21:38:07.000Z","size":978,"stargazers_count":43,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-06-27T09:05:47.227Z","etag":null,"topics":["base64","blur","data-uri","efficiency","images","loading","preview","svg"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"zlib","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/vanruesc.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2018-07-16T00:33:38.000Z","updated_at":"2025-05-03T04:06:42.000Z","dependencies_parsed_at":"2025-04-15T02:12:39.102Z","dependency_job_id":"8f93c2a2-6266-4472-9632-931179246dbe","html_url":"https://github.com/vanruesc/blur-up","commit_stats":null,"previous_names":[],"tags_count":12,"template":false,"template_full_name":null,"purl":"pkg:github/vanruesc/blur-up","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vanruesc%2Fblur-up","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vanruesc%2Fblur-up/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vanruesc%2Fblur-up/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vanruesc%2Fblur-up/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/vanruesc","download_url":"https://codeload.github.com/vanruesc/blur-up/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vanruesc%2Fblur-up/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":266430671,"owners_count":23927165,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-07-22T02:00:09.085Z","response_time":66,"last_error":null,"robots_txt_status":null,"robots_txt_updated_at":null,"robots_txt_url":"https://github.com/robots.txt","online":true,"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":["base64","blur","data-uri","efficiency","images","loading","preview","svg"],"created_at":"2024-10-01T08:44:08.822Z","updated_at":"2025-07-22T05:03:04.661Z","avatar_url":"https://github.com/vanruesc.png","language":"TypeScript","readme":"# SVG Blur Up\n\n[![CI](https://github.com/vanruesc/blur-up/actions/workflows/ci.yml/badge.svg)](https://github.com/vanruesc/blur-up/actions/workflows/ci.yml)\n[![Version](https://badgen.net/npm/v/svg-blur-up?color=green)](https://www.npmjs.com/package/svg-blur-up)\n\nA tool that creates a small, optimized version of an input image and embeds it in an SVG file. The generated SVG file scales the integrated image up to its original dimensions and applies a blur filter to create a high quality preview of the original image. Such preview SVGs can be used as temporary substitutes for images that take longer to load.\n\n| Original Image | Preview SVG   |\n|----------------|---------------|\n| 402.15 KiB     | 1.1 KiB       |\n| \u003cimg src=\"https://vanruesc.github.io/blur-up/test/images/img.jpg\" width=\"250\"\u003e | \u003cimg src=\"https://vanruesc.github.io/blur-up/test/images/img.svg\" width=\"250\"\u003e |\n\n\n## Installation\n\n```sh\nnpm install svg-blur-up\n``` \n\n\n## Usage\n\n### Command Line Interface (CLI)\n\nThe command line tool can be invoked using the `blur-up` command:\n\n```sh\nblur-up -i images/* -o previews -c configs/blur-up.json\n```\n\nYou may provide a configuration via `package.json` or as a standalone file. If there is no configuration in `package.json`, the tool will look for a configuration file with the default name `.blur-up.json` in the current working directory. Please refer to the [Options](#options) section for more information.\n\n| Option         | Shorthand | Description                                |\n|----------------|-----------|--------------------------------------------|\n| --input        | -i        | Specifies the input path or glob pattern   |\n| --output       | -o        | Specifies the output directory             |\n| --config       | -c        | Specifies an alternative config path       |\n\n\n### JavaScript API\n\n```javascript\nimport blurUp from \"svg-blur-up\";\n\n// The input path must describe a single file.\nblurUp(\"images/bg.jpg\", \"output/dir\", options)\n  .catch((e) =\u003e console.error(e));\n```\n\n### Output\n\nEach individual image will be wrapped in an SVG construct of the following form:\n\n```xml\n\u003csvg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n  width=\"IMG_WIDTH\" height=\"IMG_HEIGHT\" viewBox=\"0 0 VIEW_WIDTH VIEW_HEIGHT\" preserveAspectRatio=\"none\"\u003e\n  \u003cfilter id=\"blur\" filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\"\u003e\n    \u003cfeGaussianBlur stdDeviation=\"STD_DEVIATION_X STD_DEVIATION_Y\" edgeMode=\"duplicate\" /\u003e\n    \u003cfeComponentTransfer\u003e\u003cfeFuncA type=\"discrete\" tableValues=\"1 1\" /\u003e\u003c/feComponentTransfer\u003e\n  \u003c/filter\u003e\n  \u003cimage filter=\"url(#blur)\" x=\"0\" y=\"0\" height=\"100%\" width=\"100%\" xlink:href=\"IMG_DATA_URI\" /\u003e\n\u003c/svg\u003e\n```\n\nNote: The generated SVG file will be minified.\n\n\n## Options\n\n| Option        | Default  | Description                                       |\n|---------------|----------|---------------------------------------------------|\n| input         | -        | Can be a single path or an array of paths         |\n| output        | -        | A path that describes a file or directory         |\n| stdDeviationX | 20       | The blur strength along the X-axis                |\n| stdDeviationY | 20       | The blur strength along the Y-axis                |\n| width         | auto, 40 | The width of the preview image                    |\n| height        | auto     | The height of the preview image                   |\n| alpha         | true     | Enables alpha blurring for transparent PNG images |\n\nThe command line options `--input` and `--output` overwrite the respective fields in the configuration.\n\nIf only `width` or `height` is specified, the counter part will be calculated automatically to preserve the original aspect ratio. If both of these fields are undefined, `width` will be set to 40 and `height` will be adjusted accordingly.\n\n#### .blur-up.json\n\n```json\n{\n  \"input\": \"images/*.{bmp,jpg,png}\",\n  \"output\": \"images/previews\",\n  \"stdDeviationX\": 10,\n  \"stdDeviationY\": 10,\n  \"width\": 30\n}\n\n```\n\n#### package.json\n\n```json\n{\n  \"blurUp\": {\n    \"input\": [\"path/to/img/*.jpg\", \"other/path/*.png\"],\n    \"output\": \"output/dir\"\n  }\n}\n```\n\n#### blur-up.js\n\n```js\nimport blurUp from \"svg-blur-up\";\n\nblurUp(\"path/to/img.jpg\", \"output/dir\", {\n  stdDeviationX: 5,\n  stdDeviationY: 5\n}).catch((e) =\u003e console.error(e));\n```\n\n\n## Contributing\n\nMaintain the existing coding style. Add unit tests for any new or changed functionality. Lint and test your code.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvanruesc%2Fblur-up","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvanruesc%2Fblur-up","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvanruesc%2Fblur-up/lists"}