Resize & Compress Images On Client Side - jQuery resizeImg

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.