javascript - 是否可以仅通过 Javascript 获取外部图像并通过 REST API 发送？

Question

我有一个表单，用户可以在其中粘贴图像的外部 url。是否可以通过 javascript 获取该文件，然后将其发布到 REST API？我将 parse.com 用于其余的 api。

Answer 1

…图像的外部网址。是否可以通过 javascript 去获取该文件……</p>

不可以。这是由同源策略阻止的，您将不被允许访问它。只需将它的 URL 发布到您的 REST api 并在服务器端获取它。

虽然您无法访问与其关联的文件或数据，但您当然可以通过<img>元素嵌入来显示它。

Answer 2

无论如何，由于使用跨域资源的限制，首先必须将图像拉到您的服务器上。完成此操作后，您可以使用我精心制作的示例将图像转换为准备好传输到服务器Base64的字符串：JSONPOSTREST

<input id="urlText" />
<input id="sendData" type="submit" />
<img id="img" src="http://fiddle.jshell.net/img/logo.png" />
<script>
var imgElem = document.getElementById('img');
$('#urlText').keyup(function(){
   $('#img').attr('src',$('#urlText').val());
});

$('#sendData').click(function(){
var imgData = JSON.stringify(getBase64Image(imgElem));
  $.ajax({
  url: 'http://url.com/rest/api',
  dataType: 'json',
  data: imgData,
  type: 'POST',
  success: function(data) {
    console.log(data);
    }
  });
});

function getBase64Image(imgElem) {
// imgElem must be on the same server otherwise a cross-origin error will be thrown "SECURITY_ERR: DOM Exception 18"
    var canvas = document.createElement("canvas");
    canvas.width = imgElem.clientWidth;
    canvas.height = imgElem.clientHeight;
    var ctx = canvas.getContext("2d");
    ctx.drawImage(imgElem, 0, 0);
    var dataURL = canvas.toDataURL("image/png");
    return dataURL.replace(/^data:image\/(png|jpg);base64,/, "");
}
</script>

我的jsFiddle 示例在这里。