从 DOM 获取 img 并通过 ajax 上传答案

【问题标题】：Get img from DOM and upload it via ajax从 DOM 获取 img 并通过 ajax 上传
【发布时间】：2013-06-24 18:06:51
【问题描述】：

如何从 DOM 获取图像，然后通过 ajax 上传？

my_img_ele = document.getElementById("my_img");

这是ajax调用

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

我一直在做的只是发送 url，然后查找图像服务器端。但我认为这会更快。

编辑：请注意，用户不是通过表单上传图像。这是一个img元素。

【问题讨论】：

看看这个：sitepoint.com/html5-ajax-file-upload
处理表格。不知道如何发送以 img 元素开头的图像。
这里不存在跨域问题吗？不确定您是否可以从其他域“窃取”图像。
@user984003：如果<img> 位于不同的域中，则不能使用画布将其作为base64 获取。当您尝试读取画布的数据时，您将收到一个安全错误。 jsfiddle.net/pHER5
不上传图片数据，为什么不直接发送图片的URL，让服务器下载呢？我无法通过 AJAX 发送图像比发送 URL 更快。

标签： javascript ajax

【解决方案1】：

~~如果您问的是“通过 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 并将form 的enctype 更改为"multipart/form-data" 并在AJAX 调用中使用JavaScript 发送数据，而无需提交表单.

【讨论】：

愿意解释否决票（并因此保持 SO 精神？）
当我在控制台中尝试此操作时，我收到 Uncaught DOMException: The operation is insecure. 可能浏览器安全限制自 2013 年发布以来已更改。

【解决方案2】：

你的数字显然是错误的。事情就是这样，图像元素只不过是一个 DOM 节点，包含图像的 URL，图像本身由浏览器下载，因此在客户端计算机上它仅在浏览器内存中可用。甚至以某种方式获得对浏览器内存（缓存）的访问权，考虑到基于客户端连接，从那里上传它很可能比从原始源下载服务器端慢得多。另一种解决方案是您通过 ajax 下载基于 URL (img.src) 的图像，只需在第一个回调中使用其他 ajax 绕过它，但这当然意味着图像平均传播两倍。

【讨论】：

+1，没错。当图像的 URL 随时可用时，读取 DOM 元素并提取图像有什么意义！
@OmShankar 绝对有道理。验证码图像通常会在每次请求时更改。因此，如果有人试图获取当前可见图像，他不能只使用 url。