{"id":15938946,"url":"https://github.com/inokinoki/js-image-compress-form","last_synced_at":"2025-07-14T18:37:03.695Z","repository":{"id":91522275,"uuid":"130891140","full_name":"Inokinoki/js-image-compress-form","owner":"Inokinoki","description":"Use HTML5 Canvas element to compress image to limit size in a form","archived":false,"fork":false,"pushed_at":"2018-04-25T16:21:57.000Z","size":10,"stargazers_count":2,"open_issues_count":0,"forks_count":1,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-04-03T20:21:32.920Z","etag":null,"topics":[],"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/Inokinoki.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}},"created_at":"2018-04-24T17:33:51.000Z","updated_at":"2018-05-08T12:17:25.000Z","dependencies_parsed_at":null,"dependency_job_id":"1965db0c-ddd9-4c8f-9e06-1345f3051b0b","html_url":"https://github.com/Inokinoki/js-image-compress-form","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Inokinoki/js-image-compress-form","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Inokinoki%2Fjs-image-compress-form","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Inokinoki%2Fjs-image-compress-form/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Inokinoki%2Fjs-image-compress-form/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Inokinoki%2Fjs-image-compress-form/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Inokinoki","download_url":"https://codeload.github.com/Inokinoki/js-image-compress-form/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Inokinoki%2Fjs-image-compress-form/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":265332893,"owners_count":23748693,"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":[],"created_at":"2024-10-07T06:00:41.347Z","updated_at":"2025-07-14T18:37:03.671Z","avatar_url":"https://github.com/Inokinoki.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# JSFormImageCompressor\n\nUse HTML5 Canvas element to compress image to limit size. \n\nThis is a pure js version, using ES5 grammars and prototype to realise the class.\n\nThe form can be only passed by Ajax.\n\nMany things to be completed, welcome for your contribution.\n\n### How to use\n\n1. Import the jQuery and the single file ImageCompressForm.js\n\n   ```Html\n   \u003cscript src=\"https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js\"\u003e\u003c/script\u003e\n   \u003cscript src=\"ImageCompressForm.js\"\u003e\u003c/script\u003e\n   ```\n\n2. Get the form\n\n   ```javascript\n   var formDom = document.getElementById(\"example-form\");\n   ```\n\n3. Create a ImageCompressForm object\n\n   ```javascript\n   var form = new ImageCompressForm(formDom);\n   ```\n\n4. Register the file input elements\n\n   ```javascript\n   form.registerCompressImage(document.getElementById(\"exampleInput4\"));\n   ```\n\n5. Register the events\n\n   ```Javascript\n   form.onSuccess = onSuccess;\t// onSucess is a function\n   form.onError = onError;\t\t// onError is another function\n   ```\n\n6. Enjoy the compression and **welcome to your contribution/modification**\n\n### APIs\n\n| Events     | Description                                                  |\n| ---------- | ------------------------------------------------------------ |\n| onSubmit   | Data handle funtion alternate, called when button submit is pressed |\n| preSubmit  | Hook before onSubmit                                         |\n| postSubmit | Hook after onSubmit                                          |\n| onSuccess  | Ajax callback when submit success (which means status code is 2xx/3xx) |\n| onError    | Ajax callback when submit failed                             |\n\n| Methods                               | Description                                                  |\n| ------------------------------------- | ------------------------------------------------------------ |\n| ImageCompressForm(formElement, debug) | Constructor                                                  |\n| setRequestMethod(method)              | Set request method, usually it's POST                        |\n| setRequestUrl(url)                    | Set request url                                              |\n| setFormData(formElement)              | Set ImaeCompressForm with given form                         |\n| getFormData()                         | Get FormData object inside                                   |\n| add(key, value, filename)             | Add data into formData, for the text input or others, ignore the filename |\n| remove(key)                           | Remove from formData, no supported in Safari                 |\n| registerCompressImage(fileDom)        | Register form file input as a input that needs to be compressed |\n| setLimitSize(limitSize)               | Set image limit size, if \u003c= 0, set to 300kB                  |\n| submit()                              | Function will be executed on form onsubmit event trigged     |\n\n| Properties              | Type        | Description                                                  |\n| ----------------------- | ----------- | ------------------------------------------------------------ |\n| requestMethod           | String      | The method of request, POST, GET or others                   |\n| requestUrl              | String      | The url on which ajax will arrive                            |\n| formElement             | HTMLElement | The form element                                             |\n| formData                | FormData    | Form data in which we store the request data, only be filled while onSubmit() runs |\n| limitSize               | Integer     | Image limit size, by default 300kB (300x1024B)               |\n| needCompressedImageFile | Array       | The array in which we stored the name of file input who needs to be compressed |\n| compressedImageFile     | Array       | The array in which we stored the compressed image and raw file |\n| debug                   | Boolean     | Display debug info                                           |\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Finokinoki%2Fjs-image-compress-form","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Finokinoki%2Fjs-image-compress-form","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Finokinoki%2Fjs-image-compress-form/lists"}