Convert Image Into Blob Before Uploading - jQuery image.blob

File Size: 160 KB
Views Total: 8016
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Convert Image Into Blob Before Uploading - jQuery image.blob

image.blob is a small jQuery plugin that retrieves the image data and converts it into a Blob before uploading to the server.

How to use it:

1. Insert the minified version of the image.blob plugin after jQuery library.

<script src="/path/to/jquery.min.js"></script>
<script src="/path/to/jquery-image-blob.min.js"></script>

2. Get the blob data from an image.

var blob = $('img').imageBlob().blob();
console.log('size=' + blob.size);
console.log('type=' + blob.type);

// get the blob data by MIME type
var blob = $('img').imageBlob('image/jpeg').blob();

3. Upload the blob data to the server.

$('img').imageBlob().ajax('/upload', {
  complete: function(jqXHR, textStatus) { alert(textStatus); }

4. All possible AJAX settings.

$('img').imageBlob().ajax('/upload', {
  cache: false,
  processData: false,
  contentType: false,
  type: 'POST'

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