{"id":13447723,"url":"https://github.com/terkelg/skaler","last_synced_at":"2025-05-12T15:32:26.923Z","repository":{"id":57362214,"uuid":"178119267","full_name":"terkelg/skaler","owner":"terkelg","description":"A (329B) client-side image resizer.","archived":false,"fork":false,"pushed_at":"2020-03-15T15:45:45.000Z","size":135,"stargazers_count":91,"open_issues_count":0,"forks_count":9,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-04-25T14:59:59.780Z","etag":null,"topics":["dom","files","forms","images","input","resize","scale"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/terkelg.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":"license","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-03-28T03:27:43.000Z","updated_at":"2024-10-15T16:22:25.000Z","dependencies_parsed_at":"2022-09-13T21:00:52.816Z","dependency_job_id":null,"html_url":"https://github.com/terkelg/skaler","commit_stats":null,"previous_names":[],"tags_count":9,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/terkelg%2Fskaler","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/terkelg%2Fskaler/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/terkelg%2Fskaler/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/terkelg%2Fskaler/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/terkelg","download_url":"https://codeload.github.com/terkelg/skaler/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253766002,"owners_count":21960832,"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","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":["dom","files","forms","images","input","resize","scale"],"created_at":"2024-07-31T05:01:25.259Z","updated_at":"2025-05-12T15:32:26.625Z","avatar_url":"https://github.com/terkelg.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n  \u003cimg src=\"skaler.png\" alt=\"skaler\" width=\"150\" /\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://npmjs.org/package/skaler\"\u003e\n    \u003cimg src=\"https://badgen.now.sh/npm/v/skaler\" alt=\"version\" /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://unpkg.com/skaler\"\u003e\n    \u003cimg src=\"http://img.badgesize.io/https://unpkg.com/skaler/dist/skaler.mjs?compression=gzip\" alt=\"gzip size\" /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://github.com/terkelg/skaler/blob/master/LICENSE\"\u003e\n    \u003cimg src=\"https://img.shields.io/npm/l/skaler.svg\" alt=\"license\" /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://github.com/terkelg/skaler/blob/master/package.json\"\u003e\n    \u003cimg src=\"https://img.shields.io/badge/dependencies-none-ff69b4.svg\" alt=\"dependencies\" /\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\u003cb\u003eA 329B client-side image resizer\u003c/b\u003e\u003c/p\u003e\n\nSkaler is a simple and small tool to scale images client-side.\nIt's ideal when all you want to do is to scale user submitted images before uploading to your server.\n\nSave storage space, bandwidth and reduce server load by scaling images client side before uploading.\n\n**~~lack of~~ Features**\n- Tiny\n- Vanilla JS\n- Zero Dependencies\n\n\n## Install\n\n```\n$ npm install skaler\n```\n\nThis module exposes two module definitions:\n\n* **ES Module**: `dist/skaler.mjs`\n* **UMD**: `dist/skaler.umd.js`\n\nInclude skaler:\n```js\n// ES6\nimport skaler from 'skaler'\n\n// CJS\nconst skaler = require('skaler');\n```\n\nThe script can also be directly included from [unpkg.com](https://unpkg.com):\n```html\n\u003cscript src=\"https://unpkg.com/skaler\"\u003e\u003c/script\u003e\n```\n\n\n## Usage\n\n```js\nimport skaler from 'skaler';\n\n/**\n * Assume 'input' is the value coming from an input field:\n * \u003cinput type=\"file\" accept=\"image/*\" id=\"input\" \u003e\n */\n\nconst input = document.getElementById('#input').files[0];\n\nconst file = await skaler(input, { scale: 0.5 });\n// ~\u003e resized image as a File object - half the size\n\nconst file = await skaler(input, { width: 300 });\n// ~\u003e resized image as a File object - 300px width\n\nconst file = await skaler(input, { width: 300, height: 500 });\n// ~\u003e resized image as a File object - stretched to 300x500px\n\n```\n\n\n## API\n\n### skaler(file, options={})\nReturns: `File` \u003c_Promise_\u003e\n\nReutnrs promise that resolves to the resized [`File`](https://developer.mozilla.org/en-US/docs/Web/API/File) object.\n\n\u003e **Note**:The new files has an updated ` last modified time` property.\n\n#### file\nType: `File`\n\n[`File`](https://developer.mozilla.org/en-US/docs/Web/API/File) object to be resized.\nThis is what input elements of type `file` returns.\n\n\u003e **Note**: The file is expected to be of type image.\n\n#### options.scale\nType: `number`\u003cbr\u003e\n\nScale based on relative percentage. Example:\n```js\nlet file = await skaler(input, { scale: 0.5 });\n// ~\u003e output is half the size of the orignal\n```\n\u003e **Note**: The `width` and `height` options are ignored if `scale` is provided.\n\n#### options.width\nType: `number`\u003cbr\u003e\n\nScale to a specific width. The file keeps it aspect ratio.\n```js\nlet file = await skaler(input, { width: 200 });\n// ~\u003e output is 200px width\n```\n\n\u003e **Note**: The image can become stretched if both `width` and `height` are provided at the same time.\n\n#### options.height\nType: `number`\u003cbr\u003e\n\nScale to a specific height. The file keeps it aspect ratio.\n```js\nlet file = await skaler(input, { width: 200 });\n// ~\u003e output is 200px width\n```\n\n\u003e **Note**: The image can become stretched if both `width` and `height` are provided at the same time.\n\n### options.name\nType: `string`\u003cbr\u003e\n\nRename file during resizing. Defaults to the name of the input [`File`](https://developer.mozilla.org/en-US/docs/Web/API/File).\n\n### options.type\nType: `String`\u003cbr\u003e\n\nA `string` representing the `MIME` type of the content that will be put into the file. Defaults to a value of the input [`File`](https://developer.mozilla.org/en-US/docs/Web/API/File).\n\n\n## Future\n\nI'd plan to optimize for even better performacne and smaller code using `offscreenCanvas` and `workers` in the future as browser support gets better. I also considered `createImageBitmap()` but it's currently not supported in Safari.\n\n\n## License\n\nMIT © [Terkel Gjervig](https://terkel.com)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fterkelg%2Fskaler","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fterkelg%2Fskaler","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fterkelg%2Fskaler/lists"}