CODEWITHSUNDEEP
javascriptajax
user984003
user984003

Reputation: 29557

Get img from DOM and upload it via ajax

How can I get an image from DOM and then upload it via ajax? 

my_img_ele = document.getElementById("my_img");

This is the ajax call

    var xmlHttp=new XMLHttpRequest();
    xmlHttp.open("POST", "site", true);
    var formData = new FormData();  
    formData.append(IMG_HERE); 
    xmlHttp.send(formData);

What I have been doing is just sending the url and then looking up the image server side. But I figure this will be quicker.

EDIT: Note that the user is not uploading an image via a form. It's an img element.

Upvotes: 0

Views: 3440

Answers (2)

Om Shankar
Om Shankar

Reputation: 8069

If you were asking "upload images via AJAX", using the FormData the answer can be simpler and easily searchable on the internet.

Kindly see if this link addresses your question.

To get an image from the DOM, you would use the same above. But instead of submitting the form, you would be reading the DOM img element as a dataURI.

Check the FIDDLE for the following code's HTML:

var originalImage = document.getElementById("image"),
    canvas = document.getElementById('canvas'),
    context = canvas.getContext('2d'),
    formdata = false,
    dummy = document.getElementById('dummy'),
    newImage = new Image();

if (window.FormData) {  
    formdata = new FormData();  
}  

newImage.onload = function(){
    // width and height here should be the same as original image
    // detect before-hand, using jQuery(el).width() /.height() on the DOM element
    context.drawImage(newImage, 0, 0, 400, 300);
}

newImage.src = originalImage.src;

  // traditional ajax and jQuery, no HTML5
if (formdata) {
    var canvasToDURI = canvas.toDataURL();
    formdata.append("image-data", canvasToDURI);

    // yay!, jQuery
    $.ajax({  
      url: "upload.php",  
      type: "POST",
      data: formdata,
      processData: false,  
      contentType: false,  
      success: function (res) {  
        // do some thing !
        dummy.innerText = 'Image data sent !';
      },
      error: function(a, b, c) {
        dummy.innerText = 'The following data was not sent due to : ' + b + ' -- '+ c + ' \n\n' + canvasToDURI;
      } 
    });  
}

If FormData is also not supported, you can create a form element and change the enctype of the form to "multipart/form-data" and send the data using JavaScript in an AJAX call, without submitting the form.

Upvotes: 4

user2509223
user2509223

Reputation:

Your figure is obviously wrong. Here's the thing, an image element is nothing else than a DOM node, containing the URL of the image, the image itself get downloaded by the browser, so on a client machine it's only available in the browser memory. And even is somehow you gain acces to the browser memory (cache), consider that based on the clients connection it is highly probable that uploading it from there is way slower than dowloading it server side from the original source. The other solution is that you download the image based on the URL (img.src) via ajax get simply detour it with an other ajax in the first ones callback, but it's of course means that the image travels averagely two times more.

Upvotes: 1

Related Questions