{"id":20255049,"url":"https://github.com/hjfitz/js-images","last_synced_at":"2025-03-03T17:23:37.968Z","repository":{"id":57283265,"uuid":"182755279","full_name":"hjfitz/js-images","owner":"hjfitz","description":"Compress and resize images in the DOM","archived":false,"fork":false,"pushed_at":"2019-06-19T09:24:30.000Z","size":36,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-01-14T03:37:08.372Z","etag":null,"topics":["compression","dom","image","image-compression","image-resize","image-resizer","resize","resizing","typescript"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/hjfitz.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-04-22T10:41:21.000Z","updated_at":"2019-06-19T09:24:19.000Z","dependencies_parsed_at":"2022-09-17T14:01:50.775Z","dependency_job_id":null,"html_url":"https://github.com/hjfitz/js-images","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hjfitz%2Fjs-images","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hjfitz%2Fjs-images/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hjfitz%2Fjs-images/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hjfitz%2Fjs-images/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hjfitz","download_url":"https://codeload.github.com/hjfitz/js-images/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241706724,"owners_count":20006560,"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":["compression","dom","image","image-compression","image-resize","image-resizer","resize","resizing","typescript"],"created_at":"2024-11-14T10:36:02.173Z","updated_at":"2025-03-03T17:23:37.940Z","avatar_url":"https://github.com/hjfitz.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# js-images\n\u003e Resize and compress images within the web browser\n\n## Install\n```zsh\nyarn add js-images\n```\n\n## Usage\n\n### With a URL\n```ts\nimport modify from 'js-images'\n\nconst resizedImage: HTMLImageElement = await modify(`https://placeimg.com/640/480/any`, {\n\theight: 480,\n\twidth: 200,\n\tformat: 'dom',\n})\n\ndocument.body.appendChild(reizedImage)\n```\n### From a File Input\n```ts\nimport modify from 'js-images'\nimport axios from 'axios'\n\nconst inp: HTMLInputElement = document.querySelector('input[type=file]')\n\n// get our image from the input\nconst compressedImageAsFile: File = await modify(inp, {quality: 0.5, format: 'file'})\n\n// send it to the server!\nawait axios.post('/api/image', compressedImageAsFile)\n```\n\n### From a File Event\n```ts\nimport modify from 'js-images'\n\nconst inp: HTMLInputElement = document.querySelector('input[type=file]')\n\ninp.addEventListner('change', async (ev) =\u003e {\n\tconst imgB64 = await modify(ev.target, {quality: 0.8})\n\tconst {data: resp} = await axios.post('/api/image', {imgB64})\n})\n```\n\n**Note: top-level await does not work in the browser! these should be wrapped in an async IIFE.**\n\n## API\njs-images returns either a HTMLImageElement of the desired image, a base64 encoded image, or a raw File. It takes either an image URL or HTMLFileInput element as the first argument.\n### libraryname(img, options)\nReturn: `Promise\u003cHTMLImageElement|string|File\u003e`\n#### options.height\nType: `number`\nThe desired height to scale to. If no `width` is given, the resulting width is scaled proportionally.\n#### options.width\nType: `number`\nThe desired width to scale to. Like `options.height`, if no `height` is given then the resulting height is scaled proportionally.\n#### options.quality\nType: `number`\nThe quality of the new image, from 0.0 (lowest) to 1.0 (height). By including this, the image will be converted to a JPG.\n#### options.format\nType: `string`\nHow the new image should be returned. May one of:  `url|dom|file`","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhjfitz%2Fjs-images","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhjfitz%2Fjs-images","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhjfitz%2Fjs-images/lists"}