如何在没有文件对话框的情况下通过javascript/ajax从url发布图像

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

本文关键字：url ajax 布图像 图像 javascript 文件 对话框 情况下      更新时间：2023-09-26

我正在尝试遵循一些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画布创建的。我可以成功地将画布转换为base64数据并将其提交给我的服务器，此时它会返回图像所在服务器的url-因此我想使用上面的示例代码将该url（或者可能是base64数据）传递给API，但当我使用下面的方法时，我感觉它不起作用，因为在从API返回给我的数据中，"MediaData"键值为null。

有人知道将我的图像传递到这个API的正确方法吗？

我发现了这一点——答案是创建一个名为@Musa mentiound的blob。我使用了以下方法：

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(){
    //
  }
});
相关文章：