Resize & Compress Images On Client Side - jQuery resizeImg
File Size: | 14.3 KB |
---|---|
Views Total: | 7077 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

resizeImg is a jQuery plugin that resizes and compresses images on the client side and returns a Base64 string for further use.
Features:
- Resize images by width, ratio, or weight.
- Output as JPG or PNG image.
- Custom compression quality.
- Capture images from mobile camera.
- Automatic image orientation detection.
- Callback functions.
How to use it:
1. Load jQuery library and the resizeImg jQuery plugin's files in the document.
<!-- jQuery Library --> <script src="/path/to/cdn/jquery.slim.min.js"></script> <!-- Core --> <script src="/path/to/jquery.resizeImg.js"></script> <!-- Bugfix for iOS & Android --> <script src="/path/to/mobileBUGFix.mini.js"></script>
2. Create a file input that allows the user to select an image from local.
<input id="file" type="file" />
3. Call the plugin on the file input and determine the resize mode as follows:
- 1: Resize by height
- 2: Resize by ratio
- 3: Reduce file size
$("#file").resizeImg({ mode: 1, val: 400, // 400px })
4. Determine the MIME Type. Either 'image/jpeg' or 'image/png'.
$("#file").resizeImg({ type: "image/jpeg" })
5. Specify the compression quality. Default: 80%.
$("#file").resizeImg({ quality: 0.7 // 70% })
6. Decide whether to allow the camera on the phone to be used to capture images. Default: true.
$("#file").resizeImg({ capture: false })
7. Callback functions.
$("#file").resizeImg({ before: function(file) { // do something }, callback: function(result) { // do something } })
Changelog:
2022-11-23
- JS update
This awesome jQuery plugin is developed by windy2006. For more Advanced Usages, please check the demo page or visit the official website.