Resize & Compress Images On Client Side - jQuery resizeImg

Resize & Compress Images On Client Side - jQuery resizeImg
File Size: 14.3 KB
Views Total: 317
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
  }
})

This awesome jQuery plugin is developed by windy2006. For more Advanced Usages, please check the demo page or visit the official website.