Press "Enter" to skip to content

JQuery Extension to Get the Base64 Code For the Resized Image | jQuery resizeImg

jquery.resizeImg is a compressor Zip the image file directly on the client, and re-encode the base64-encoder of the compressed image into the callback function.

resizeImg is a jQuery plugin that resizes and compresses images on the client-side and returns the Base64 string for use again. This plugin can automatically correct the positive direction according to the direction information that the photo captures.


  • Resize images according to width, proportion, or weight.
  • Output as JPG or PNG image.
  • Dedicated compression quality.
  • Take pictures from a mobile camera.
  • Automatic detection of image orientation.
  • Callback functions.

query reduce image size before upload, client side image resize before upload jquery, resize image client side before upload javascript, how to compress image size in javascript, javascript compress file before upload

How to make use of it:

1. Load the jQuery library and the resizeImg jQuery plugin’s files within the doc.

<!-- 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/"></script>

2. Create a file input that permits the person to pick out a picture from native.

<input id="file" type="file" />

3. Call the plugin on the file input and decide the resize mode as follows:

  mode: 1,
  val: 400, // 400px

4. Determine the MIME Type. Either ‘image/jpeg’ or ‘image/png’.

  type: "image/jpeg"

5. Specify the compression high quality.

  quality: 0.7 // 70%

6. Decide whether or not to permit the digital camera on the telephone for use to capture photos.

  capture: false

7. Callback features.

  before: function(file) {
    // do something
  callback: function(result) {
    // do something

Resize & Compress Images On Client Side, jquery resizeImg Plugin/Github, javascript compress base64 image, compress image before upload html5, react client side image compression

See Demo And Download

Official Website(windy2006): Click Here

This superior jQuery/javascript plugin is developed by windy2006. For extra advanced usage, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published.