{"id":25352402,"url":"https://github.com/kode-team/image-resize","last_synced_at":"2025-10-09T01:37:38.369Z","repository":{"id":44876220,"uuid":"100547704","full_name":"kode-team/image-resize","owner":"kode-team","description":"Image resizer for javascript","archived":false,"fork":false,"pushed_at":"2024-06-07T06:49:35.000Z","size":3398,"stargazers_count":52,"open_issues_count":0,"forks_count":7,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-09-23T14:39:09.610Z","etag":null,"topics":["image","image-processing","image-resize","imageresizer","resize","resize-image","resizeimage"],"latest_commit_sha":null,"homepage":"https://kode-team.github.io/image-resize/","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/kode-team.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2017-08-17T01:25:35.000Z","updated_at":"2025-09-09T16:21:08.000Z","dependencies_parsed_at":"2025-08-16T02:34:37.971Z","dependency_job_id":"3c211760-99f9-40c8-b01a-dbe44b6344bd","html_url":"https://github.com/kode-team/image-resize","commit_stats":{"total_commits":64,"total_committers":1,"mean_commits":64.0,"dds":0.0,"last_synced_commit":"9991f9343fee3b3bbdade80c52dd0564a668dbee"},"previous_names":["redgoosedev/image-resize","redgoose-dev/image-resize"],"tags_count":5,"template":false,"template_full_name":null,"purl":"pkg:github/kode-team/image-resize","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kode-team%2Fimage-resize","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kode-team%2Fimage-resize/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kode-team%2Fimage-resize/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kode-team%2Fimage-resize/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kode-team","download_url":"https://codeload.github.com/kode-team/image-resize/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kode-team%2Fimage-resize/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279000717,"owners_count":26082895,"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-10-08T02:00:06.501Z","response_time":56,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","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":["image","image-processing","image-resize","imageresizer","resize","resize-image","resizeimage"],"created_at":"2025-02-14T18:54:08.784Z","updated_at":"2025-10-09T01:37:38.348Z","avatar_url":"https://github.com/kode-team.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# image-resize\n\n개인적으로 마음에 드는 이미지 리사이즈 도구를 못찾아서 이렇게 만들게 되었다.  \n이 도구는 웹 브라우저에서 사용하는 `\u003ccanvas/\u003e`엘리먼트를 사용하여 이미지 리사이즈 한다.\n\n\n## Demo\n\n데모를 통하여 이미지 url, 이미지 첨부파일을 리사이즈하는 모습을 볼 수 확인할 수 있다.\n\n\u003e https://kode-team.github.io/image-resize/\n\n\n## Installation\n\n`CLI`에서 설치할 프로젝트에서 다음과 같은 명령을 실행한다.\n\n```\nnpm install image-resize\nyarn add image-resize\nbun add -d image-resize\n```\n\n\n## Usage\n\n`import`로 함수를 불러서 비동기 방식으로 사용하면 된다.\n\n### Module environment\n\n```javascript\nimport imageResize from 'image-resize'\n\nlet res = await imageResize('image.jpg', {\n  format: 'png',\n  width: 640,\n})\n```\n\n### Vanilla environment\n\n```html\n\u003cscript src=\"imageResize.umd.js\"\u003e\u003c/script\u003e\n\n\u003cscript\u003e\nlet res = await imageResize('image.jpg', {\n  format: 'png',\n  width: 640,\n})\n\u003c/script\u003e\n```\n\n\n## Source\n\n사용하기 먼저 어떤 형식의 이미지 데이터를 지원하는지 확인해볼 필요가 있다.\n지원하는 이미지 데이터의 형식은 다음과 같다.\n\n- `String`: 이미지 url\n- `File`: File 형식의 객체\n- `Blob`: Blob 타입의 객체\n- `HTMLCanvasElement`: canvas 엘리먼트\n\n\n## Options\n\n다음과 같은 옵션을 사용할 수 있다.\n\n|    Name    |  Type  |    Default    | Description                                             |\n|:----------:|:------:|:-------------:|:--------------------------------------------------------|\n|   width    | number |     `320`     | 조절할 가로사이즈                                               |\n|   height   | number |  `undefined`  | 조절할 세로 사이즈. 한쪽값이 있는쪽으로 기준이 되어 조절한다.                     |\n|   format   | string |     `jpg`     | 출력할 포맷. `png,jpg,webp`                                  |\n| outputType | string |   `base64`    | 출력방식. `base64,canvas,blob`                              |\n|  quality   | number |     `.75`     | jpg 이미지일때의 이미지 퀄리티값                                     |\n|  reSample  | number |      `2`      | 리샘플링 횟수. 수치가 높을수록 경계선이 부드러워지지만 처리속도는 느려진다. 최대 4까지 적용된다. |\n|  sharpen   | number |    `0.75`     | 선명함의 강도                                                 |\n|  bgColor   | string | `transparent` | 캔버스 배경색 (배경이 투명한 이미지를 사용하면 영향을 받을 수 있다.)                |\n\n### 사이즈 값 조정\n\nwidth, height 사이즈 값은 다음과 같은 조건을 따른다.\n\n- width, height 둘다 있을때: width 값이 기준이 된다.\n- width 값이 없을때: height 값이 기준이 된다.\n- height 값이 없을때: width 값이 기준이 된다.\n- width, height 둘다 없을때: width 값이 기준이 된다.\n\n만약 height 값을 기준으로 사용하고 싶다면 `width`값을 `0`이나 `undefined`으로 넣어줘야한다.\n\n### 배경색\n\n기본값으로 `transparent`로 설정되어있다.\n투명한 배경 이미지에 배경색을 넣고싶다면 `#ffffff`같은 값으로 넣어주면 배경색이 들어가게 된다.\n\n\n## Output\n\n함수를 실행하고 반환해주는 데이터의 형식이다.\n옵션에서 `outputType` 값에 맞는 형식으로 데이터가 리턴된다.\n\n- `base64`: base64 형식의 문자\n- `blob`: Blob 타입의 객체\n- `canvas`: canvas 엘리먼트\n\n\n## Development\n\n이 도구를 직접 수정할 수 있다.  \n`/src`에 있는 소스를 수정하고 다음과 같이 cli 명령을 통하여 빌드할 수 있다.\n\n```\n// development\nnpm run dev\n\n// production\nnpm run build\n\n// preview\nnpm run preview\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkode-team%2Fimage-resize","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkode-team%2Fimage-resize","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkode-team%2Fimage-resize/lists"}