jquery-image-blob

A simple jQuery plugin for uploading embedded images, eliminating the need to manually download and upload via form. The image is converted into a Blob and uploaded as a file.

Installation

Add this line after the jQuery library.

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

Usage

Create an image blob:

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

Create an image blob with the specified MIME type:

var blob = $('img').imageBlob('image/jpeg').blob();

Create an image blob and upload it:

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

Create an image blob and upload it along with other params:

$('img').imageBlob()
    .formData({foo : 'bar'})
    .ajax('/upload');

Configuration

The default AJAX settings are inherited from $.ajaxSettings and can be further modified:

// using GET instead of POST
$.fn.imageBlob.ajaxSettings.type = 'GET';

If the image's name attribute is missing, a default filename is used:

$.fn.imageBlob.defaultImageName = 'IMG_Upload';