{"id":15007662,"url":"https://github.com/shellophobia/transform-image-js","last_synced_at":"2026-03-01T06:32:39.611Z","repository":{"id":57153592,"uuid":"58386597","full_name":"shellophobia/transform-image-js","owner":"shellophobia","description":"JS library to transform the image","archived":false,"fork":false,"pushed_at":"2021-10-01T00:40:47.000Z","size":120,"stargazers_count":15,"open_issues_count":0,"forks_count":2,"subscribers_count":1,"default_branch":"master","last_synced_at":"2026-01-25T12:53:58.701Z","etag":null,"topics":["blob","canvas2d","client-compression","commonjs","commonjs-modules","compression","frontend-compression","image-resize","javascript","jquery-plugin","js-compression","jsdelivr","jsdelivr-cdn","npm","npm-module","npmjs","react","transform","unpkg","yarn"],"latest_commit_sha":null,"homepage":"https://shellophobia.github.io/uploadresizeimage.html","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/shellophobia.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":"SECURITY.md","support":null}},"created_at":"2016-05-09T15:17:37.000Z","updated_at":"2023-11-16T19:18:18.000Z","dependencies_parsed_at":"2022-09-07T06:21:02.198Z","dependency_job_id":null,"html_url":"https://github.com/shellophobia/transform-image-js","commit_stats":null,"previous_names":["shellophobia/uploadcompressimage"],"tags_count":8,"template":false,"template_full_name":null,"purl":"pkg:github/shellophobia/transform-image-js","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shellophobia%2Ftransform-image-js","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shellophobia%2Ftransform-image-js/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shellophobia%2Ftransform-image-js/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shellophobia%2Ftransform-image-js/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/shellophobia","download_url":"https://codeload.github.com/shellophobia/transform-image-js/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shellophobia%2Ftransform-image-js/sbom","scorecard":{"id":817531,"data":{"date":"2025-08-11","repo":{"name":"github.com/shellophobia/transform-image-js","commit":"46ad071c9528d940bdd9cc4b4a398de79fb5c707"},"scorecard":{"version":"v5.2.1-40-gf6ed084d","commit":"f6ed084d17c9236477efd66e5b258b9d4cc7b389"},"score":4.1,"checks":[{"name":"Maintained","score":0,"reason":"0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project is \"actively maintained\".","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#maintained"}},{"name":"Code-Review","score":0,"reason":"Found 0/24 approved changesets -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project requires human code review before pull requests (aka merge requests) are merged.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#code-review"}},{"name":"Security-Policy","score":4,"reason":"security policy file detected","details":["Info: security policy file detected: SECURITY.md:1","Warn: no linked content found","Info: Found disclosure, vulnerability, and/or timelines in security policy: SECURITY.md:1","Info: Found text in security policy: SECURITY.md:1"],"documentation":{"short":"Determines if the project has published a security policy.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#security-policy"}},{"name":"Binary-Artifacts","score":10,"reason":"no binaries found in the repo","details":null,"documentation":{"short":"Determines if the project has generated executable (binary) artifacts in the source repository.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#binary-artifacts"}},{"name":"CII-Best-Practices","score":0,"reason":"no effort to earn an OpenSSF best practices badge detected","details":null,"documentation":{"short":"Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#cii-best-practices"}},{"name":"Fuzzing","score":0,"reason":"project is not fuzzed","details":["Warn: no fuzzer integrations found"],"documentation":{"short":"Determines if the project uses fuzzing.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#fuzzing"}},{"name":"Vulnerabilities","score":10,"reason":"0 existing vulnerabilities detected","details":null,"documentation":{"short":"Determines if the project has open, known unfixed vulnerabilities.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#vulnerabilities"}},{"name":"Dangerous-Workflow","score":10,"reason":"no dangerous workflow patterns detected","details":null,"documentation":{"short":"Determines if the project's GitHub Action workflows avoid dangerous patterns.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#dangerous-workflow"}},{"name":"Packaging","score":-1,"reason":"packaging workflow not detected","details":["Warn: no GitHub/GitLab publishing workflow detected."],"documentation":{"short":"Determines if the project is published as a package that others can easily download, install, easily update, and uninstall.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#packaging"}},{"name":"License","score":10,"reason":"license file detected","details":["Info: project has a license file: LICENSE:0","Info: FSF or OSI recognized license: MIT License: LICENSE:0"],"documentation":{"short":"Determines if the project has defined a license.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#license"}},{"name":"Token-Permissions","score":0,"reason":"detected GitHub workflow tokens with excessive permissions","details":["Warn: no topLevel permission defined: .github/workflows/npmpublish.yml:1","Info: no jobLevel write permissions found"],"documentation":{"short":"Determines if the project's workflows follow the principle of least privilege.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#token-permissions"}},{"name":"Pinned-Dependencies","score":0,"reason":"dependency not pinned by hash detected -- score normalized to 0","details":["Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/npmpublish.yml:14: update your workflow using https://app.stepsecurity.io/secureworkflow/shellophobia/transform-image-js/npmpublish.yml/master?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/npmpublish.yml:15: update your workflow using https://app.stepsecurity.io/secureworkflow/shellophobia/transform-image-js/npmpublish.yml/master?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/npmpublish.yml:22: update your workflow using https://app.stepsecurity.io/secureworkflow/shellophobia/transform-image-js/npmpublish.yml/master?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/npmpublish.yml:23: update your workflow using https://app.stepsecurity.io/secureworkflow/shellophobia/transform-image-js/npmpublish.yml/master?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/npmpublish.yml:34: update your workflow using https://app.stepsecurity.io/secureworkflow/shellophobia/transform-image-js/npmpublish.yml/master?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/npmpublish.yml:35: update your workflow using https://app.stepsecurity.io/secureworkflow/shellophobia/transform-image-js/npmpublish.yml/master?enable=pin","Info:   0 out of   6 GitHub-owned GitHubAction dependencies pinned"],"documentation":{"short":"Determines if the project has declared and pinned the dependencies of its build process.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#pinned-dependencies"}},{"name":"Signed-Releases","score":-1,"reason":"no releases found","details":null,"documentation":{"short":"Determines if the project cryptographically signs release artifacts.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#signed-releases"}},{"name":"Branch-Protection","score":-1,"reason":"internal error: error during branchesHandler.setup: internal error: githubv4.Query: Resource not accessible by integration","details":null,"documentation":{"short":"Determines if the default and release branches are protected with GitHub's branch protection settings.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#branch-protection"}},{"name":"SAST","score":0,"reason":"SAST tool is not run on all commits -- score normalized to 0","details":["Warn: 0 commits out of 13 are checked with a SAST tool"],"documentation":{"short":"Determines if the project uses static code analysis.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#sast"}}]},"last_synced_at":"2025-08-23T14:34:16.916Z","repository_id":57153592,"created_at":"2025-08-23T14:34:16.916Z","updated_at":"2025-08-23T14:34:16.916Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29962025,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-01T05:59:08.471Z","status":"ssl_error","status_checked_at":"2026-03-01T05:58:04.208Z","response_time":124,"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":["blob","canvas2d","client-compression","commonjs","commonjs-modules","compression","frontend-compression","image-resize","javascript","jquery-plugin","js-compression","jsdelivr","jsdelivr-cdn","npm","npm-module","npmjs","react","transform","unpkg","yarn"],"created_at":"2024-09-24T19:13:19.001Z","updated_at":"2026-03-01T06:32:39.591Z","avatar_url":"https://github.com/shellophobia.png","language":"JavaScript","readme":"# transform-image-js\n\n[![Build Status](https://img.shields.io/travis/shellophobia/transform-image-js.svg)](https://travis-ci.org/github/shellophobia/transform-image-js)\n[![Version](https://img.shields.io/npm/v/@shellophobia/transform-image-js.svg)](https://www.npmjs.com/package/@shellophobia/transform-image-js)\n[![License](https://img.shields.io/npm/l/@shellophobia/transform-image-js.svg)](https://www.npmjs.com/package/@shellophobia/transform-image-js)\n[![minified size](https://img.shields.io/bundlephobia/min/@shellophobia/transform-image-js.svg)](https://www.npmjs.com/package/@shellophobia/transform-image-js)\n\n\u003e [transform-image-js](https://github.com/shellophobia/transform-image-js) is a library to perform transformations on an image file e.g. resize an image within defined constraints and also allows to adjust the quality of image. One of the use cases is when you want to perform a size optimization on the image before uploading.\n\n## Getting started\n\n### Installing\n\nUsing npm:\n\n```bash\nnpm i @shellophobia/transform-image-js\n```\n\nUsing yarn:\n\n```bash\nyarn add @shellophobia/transform-image-js\n```\n\nUsing jsDelivr CDN:\n\n```html\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/@shellophobia/transform-image-js/lib/transform-image-js.min.js\"\u003e\u003c/script\u003e\n```\n\nUsing unpkg CDN:\n\n```html\n\u003cscript src=\"https://unpkg.com/@shellophobia/transform-image-js/lib/transform-image-js.min.js\"\u003e\u003c/script\u003e\n```\n\n### Usage\n\n#### Import\n\nin CommonJS:\n```js\nconst transformImage = require(\"@shellophobia/transform-image-js\")\n```\n\nin ES6:\n\n```js\nimport transformImage from '@shellophobia/transform-image-js';\n```\n\n#### Resize image to max 500x500 with quality as 0.9:\n\n##### Vanilla JS and HTML\n```html\n\u003cinput id=\"demo\" type=\"file\" onchange=\"handleUpload\"\u003e\n```\n```js\nfunction handleUpload(e){\n  const file = e.target.files[0];\n  // The library will add a property `transformImageJS` on window once you import it\n  const transformImage = new transformImageJS.TransformImage({});\n  transformImage.resizeImage(file, {maxHeight: 500, maxWidth:500, quality:0.9}).then(res=\u003e{\n    //The response returns an object that has the output blob in output attribute and has metadata for image sizes before and after transformation\n    console.log(res);\n  }).catch(err =\u003e {\n    // handle error\n  });\n}\n\n// using async function\nasync function handleUpload(e) {\n  const file = e.target.files[0];\n  const transformImage = new transformImageJS.TransformImage({});\n  try {\n    const res = await transformImage.resizeImage(file, {maxHeight: 500, maxWidth:500, quality:0.9});\n    console.log(res);\n  } catch(e) {\n    // handle error\n  }\n}\n```\n\n##### React JSX\n```js\nimport React from \"react\";\nimport transformImage from \"@shellophobia/transform-image-js\";\n\nconst handleUpload = async (e) =\u003e {\n  const file = e.target.files[0];\n  console.log(file);\n  const transformImage = new transformImage({});\n  try {\n    const res = await transformImage.resizeImage(file, {maxHeight: 500, maxWidth:500, quality:0.9});\n    console.log(res);\n  } catch (e) {\n    console.log(e);\n  }\n}\n\nexport default function App() {\n  return (\n    \u003cdiv className=\"App\"\u003e\n      \u003cinput type=\"file\" onChange={handleUpload} /\u003e\n    \u003c/div\u003e\n  );\n}\n```\n\n## API\n\n### Initialization options\n\n#### Description\nFollowing options can be passed during initialization of transformImage that returns an object on which methods can be called\n\n#### `transformImage(options)`\n\n| Name             | Type     | Description                                                          | Default                |\n|------------------|----------|----------------------------------------------------------------------|------------------------|\n| sizeLimit        | int      | the byte size limit for the input file/blob                          | 16777216 bytes = 16MB    |\n| outputType       | enum     | defines the output object format. Allowed values :- blob/base64/file | blob                   |\n| allowedFileTypes | []string | allowed types for the input file/blob e.g. PNG, JPEG, JPG            | [\"jpg\", \"png\", \"jpeg\"] |\n\n\n### Methods\n\n#### `resizeImage(imageFile, options, fileName) =\u003e {Promise}`\n\n#### Description:\nResize an image file\n\n#### Parameters:\n| Name     | Type      | Description                                                                                 | Required | Default |\n|----------|-----------|---------------------------------------------------------------------------------------------|----------|---------|\n| image    | File/Blob | File object / Blob to be resized                                                            | Yes      | N/A     |\n| options  | Object    | Additional options described below. The values can also override the TransformImage options | No       | {}      |\n| fileName | string    | Name of the file if outputType is file (Optional)                                           | No       | \"\"      |\n\n##### Options\n| Name      | Type  | Description                                                       | Default |\n|-----------|-------|-------------------------------------------------------------------|---------|\n| maxWidth  | int   | the max width for the file in px                                  | 500     |\n| maxHeight | int   | the max height for the file in px                                 | 500     |\n| quality   | float | a value between 0 and 1 to denote the quality of the output image | 0.9     |\n\n#### Returns:\nPromise that resolves to the output object\n\n| Name     | Type               | Description                                                        |\n|----------|--------------------|--------------------------------------------------------------------|\n| output   | blob/base64 string | Blob or base64 string based on configuration                       |\n| metadata | object             | Metadata about initial image dimensions and final image dimensions |\n\n##### Metadata\n| Name           | Type | Description           |\n|----------------|------|-----------------------|\n| originalHeight | int  | Original image height |\n| originalWidth  | int  | Original image width  |\n| resizedHeight  | int  | Resized image height  |\n| resizedWidth   | int  | Resized image width   |\n\n## JQuery Plugin\n[image_compress_plugin](https://cdn.jsdelivr.net/npm/@shellophobia/transform-image-js@1.0.3/jquery_plugin/image_compress_plugin.js) is a jquery plugin that allows to add a file upload and compress functionality.\n\n### Usage\n\n#### Importing\n```html\n\u003cscript type=\"text/javascript\" src=\"https://cdn.jsdelivr.net/npm/@shellophobia/transform-image-js/jquery_plugin/image_compress_plugin.js\"\u003e\u003c/script\u003e\n```\n\n#### Example\n```html\n\u003cp\u003eThis is a demo for the resize image jquery plugin. Feel free to go through the source code \n\u003ca href=\"https://github.com/shellophobia/UploadCompressImage/blob/master/jquery_plugin/image_compress_plugin.js\"\u003ehere\u003c/a\u003e\u003c/p\u003e\n\u003cdiv id=\"fileinput\"\u003e\n  \u003cbutton class=\"btn-upload\"\u003e\u003ci class=\"fas fa-cloud-upload-alt\"\u003e\u003c/i\u003e Click Here to Upload\u003c/button\u003e\n  \u003cp class=\"drag-p\"\u003eOr Drag N Drop the file\u003c/p\u003e\n  \u003cinput type=\"file\" multiple=\"true\"\u003e\n\u003c/div\u003e\n\u003cdiv id=\"preview\"\u003e\u003c/div\u003e\n\n\u003cscript type=\"text/javascript\" src=\"https://code.jquery.com/jquery-1.12.4.min.js\"\u003e\u003c/script\u003e\n\u003cscript type=\"text/javascript\" src=\"https://cdn.jsdelivr.net/npm/@shellophobia/transform-image-js/jquery_plugin/image_compress_plugin.js\"\u003e\u003c/script\u003e\n\u003cscript type=\"text/javascript\"\u003e\n$(document).ready(function() {\n  $(\"#fileinput\").uploadFile({\n    enablePreview: true,\n    appendFileInput: false,\n    autoSubmit: false,\n    previewSelector: \"#preview\"\n  });\n});\n\u003c/script\u003e\n```\n\n[Configuration gist for jquery plugin](https://gist.github.com/shellophobia/547a13696996eebbcf20b19f1bfffca4)\n\n## License\n\n[MIT](http://opensource.org/licenses/MIT)\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshellophobia%2Ftransform-image-js","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fshellophobia%2Ftransform-image-js","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshellophobia%2Ftransform-image-js/lists"}