Получите img из DOM и загрузите его через ajax

Question

Как я могу получить изображение из DOM, а затем загрузить его через ajax?

my_img_ele = document.getElementById("my_img"); 

Это Аякса позвонить

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

То, что я делаю, это просто посылая URL, а затем, глядя на стороне сервера изображений. Но я считаю, что это будет быстрее.

EDIT: Обратите внимание, что пользователь не загружает изображение через форму. Это элемент img.

Answer 1

Ваша цифра, очевидно, неверна. Вот что, элемент изображения - это не что иное, как узел DOM, содержащий URL-адрес изображения, само изображение загружается браузером, поэтому на клиентском компьютере оно доступно только в памяти браузера. И даже вы каким-то образом получаете доступ к памяти браузера (кэш), считайте, что на основе соединения с клиентами очень вероятно, что загрузка с него происходит медленнее, чем загрузка его серверной части из исходного источника. Другое решение заключается в том, что вы загружаете изображение на основе URL (img.src) через ajax, просто объедините его с помощью другого ajax в первом обратном вызове, но это, конечно, означает, что изображение перемещается в среднем в два раза больше.

Answer 2

Если вы спрашивали «загружать изображения через AJAX», используя FormData ответ может быть проще и легко найти в Интернете.

Просьба посмотреть, соответствует ли this link ваш вопрос.

Чтобы получить изображение из DOM, вы должны использовать то же самое. Но вместо отправки формы вы будете читать элемент DOM img как dataURI.

Проверьте FIDDLE для 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; 
     } 
    }); 
} 

Если FormData также не поддерживается, вы можете создать форму element и изменить enctype в form на "multipart/form-data" и отправить данные с помощью JavaScript в AJAX, не отправляя форму.