如何在没有文件对话框的情况下通过 javascript / ajax post 来自 url 的图像

Question

我正在尝试遵循一些 API 文档，其中提供了以下示例：

$("#submit").click(function () {
var data = new FormData();
var files = $('#fileUpload').get(0).files;
if (files.length > 0) {
    data.append("attachment[file]", files[0]);
    data.append("mediaExtension", "jpg");

}
$.ajax({
     type: "post",
     url: "http://[ur]/api/Interaction/InteractionCreateLocationResultAsMedia",
    data: data,
    mimeType: "multipart/form-data",
    cache: false,
    contentType: false,
    processData: false,
    success: function (data) {
        //do stuff
    },
    error: function (data, resultstatus, xhr) {
        alert("api call failed" + xhr);
    }
});

但是，我没有使用文件上传来创建图像。该图像实际上是从 html5 canvas 创建的。我可以成功地将 canvas 转换为 base64 数据并将其提交到我的服务器，此时它 returns a url 到图像驻留在我的服务器上的位置 - 所以我想传递它使用上面的示例代码 URL （或者可能是 base64 数据）到 API 上，但是当我使用下面的方法时，我感觉它不起作用，因为在返回给我的数据中从 API 开始，"MediaData" 键值为空。

有谁知道将我的图片传递给这个 API 的正确方法吗？

Answer 1

我想通了 - 答案是创建一个 blob，正如@Musa 提到的那样。我使用了以下方法：

var imgSrc = $('.image-container').find('img').attr('src');

var dataURLToBlob = function(dataURL) {
    var BASE64_MARKER = ';base64,';
    if (dataURL.indexOf(BASE64_MARKER) == -1) {
      var parts = dataURL.split(',');
      var contentType = parts[0].split(':')[1];
      var raw = decodeURIComponent(parts[1]);

      return new Blob([raw], {type: contentType});
    }

    var parts = dataURL.split(BASE64_MARKER);
    var contentType = parts[0].split(':')[1];
    var raw = window.atob(parts[1]);
    var rawLength = raw.length;

    var uInt8Array = new Uint8Array(rawLength);

    for (var i = 0; i < rawLength; ++i) {
      uInt8Array[i] = raw.charCodeAt(i);
    }

    return new Blob([uInt8Array], {type: contentType});
}

var apiData = new FormData();
apiData.append( "attachment[file]", blob);

$.ajax({
  url: submissionURL,
  type: "post",
  dataType: 'json', //return response as json
  mimeType: "multipart/form-data",
  cache: false,
  contentType: false,
  processData: false,
  data: apiData,
  error: function(data,resultstatus,xhr) {
    console.error("error:",data,resultstatus,xhr);
 },
  success: function(){
    //
  }
});

如何在没有文件对话框的情况下通过 javascript / ajax post 来自 url 的图像

how to post an image from a url via javascript / ajax without file dialog

javascript

ajax

jquery

base64

multipartform-data