从 URL 下载图像并通过 AJAX 发布到 API

Question

我在我们的网站上展示了许多图像。 此外，我们允许用户从外部源 URL 上传图像或预览图像。 网站上的所有图像都可以通过标准<img>标签获得，其中src设置为相关图像 URL。

单击图像时，我想获取图像并将其发布到 API，然后它将处理图像并返回结果：

Base64 编码：

function getBase64Image(img) {
  var canvas = document.createElement("canvas");
  canvas.width = img.width;
  canvas.height = img.height;
  var ctx = canvas.getContext("2d");
  ctx.drawImage(img, 0, 0);
  var dataURL = canvas.toDataURL("image/png");
  return dataURL.replace(/^data:image\/(png|jpg|jpeg);base64,/, "");
} 

AJAX

$("#img").click(function () {

  var base64 = getBase64Image(document.getElementById("img"));

  $.ajax({
    url: post_url,
    type: 'POST',
    data: { "img_data": base64 },
    dataType: 'jsonp',
    processData: false,
    contentType: false,
    success: function () {
    ...
    },
  });
}); 

我知道有几个问题，而且可能更多。 从技术上讲，我并不是在“上传”图像，因为大多数图像已经显示在页面上。 我也在 Base64 中编码以发送到服务器，但我确实需要在 UTF-8 中解码的数据。 我想我可以在服务器端做，但如果能在这里做就好了。

Answer 1

我认为在这种情况下，您应该有两个流程：一个是用户上传的图像，另一个是来自外部资源的图像。

在从外部资源到图像的流程中：您的系统知道外部 URL 到图像，因此您可以在发布请求中传递 URL，然后在服务器中下载图像并根据需要进行操作。

并且流向用户选择的图像，您将文件发布到服务器并根据需要对其进行操作。