CODEWITHSUNDEEP
javascriptjqueryhtmlcssimage
Harkedian
Harkedian

Reputation: 153

How to print or save the online edited image (with javascript/jQuery)?

I made an simple image manipulation experiment with html, css and javascript/jquery.

We can upload an image from local drive and displayed in browser. After that we can also edit/tag the displayed image. I use this jquery image tag plugin.

Then I think about, how can i save/print the edited image?

This is my code snippet :

$(function () {
    $(":file").change(function () {
        if (this.files && this.files[0]) {
            var reader = new FileReader();
            reader.onload = imageIsLoaded;
            reader.readAsDataURL(this.files[0]);
        }
    });
});

function imageIsLoaded(e) {
    $('#myImg').attr('src', e.target.result);
    $('#myImg').imageTag();
};

Here's the real live app : http://nanonimos.com/upload-tag-image/

and this is the source code.

Any clue/advice would be greatly appreciated :)

Upvotes: 0

Views: 1911

Answers (2)

Vendhan Parthy
Vendhan Parthy

Reputation: 307

You can convert the whole div to an canvas then convert the canvas into data uri(png,jpeg). Check this Fiddlecanvastoimage for more.

Upvotes: 1

Anand Singh
Anand Singh

Reputation: 2363

Use this function(From Stackoverflow) to convert dataURI to blob:

function dataURItoBlob(dataURI) {
    // convert base64/URLEncoded data component to raw binary data held in a string
    var byteString;
    if (dataURI.split(',')[0].indexOf('base64') >= 0)
        byteString = atob(dataURI.split(',')[1]);
    else
        byteString = unescape(dataURI.split(',')[1]);

    // separate out the mime component
    var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];

    // write the bytes of the string to a typed array
    var ia = new Uint8Array(byteString.length);
    for (var i = 0; i < byteString.length; i++) {
        ia[i] = byteString.charCodeAt(i);
    }

    return new Blob([ia], {type:mimeString});
}

and then whenever you want to save just post this file to server.

In HTML5 you can do like this:

var blob = dataURItoBlob(data);
var fd = new FormData();
fd.append("imageFile", blob);

Then send it with ajax like this:

$.ajax({
  type: "POST",
  url:"url to file",
  data: fd,
  success: function(result){
  //check success
  };
});

Upvotes: 1

Related Questions