Загрузить изображение с URL и отправить в API через AJAX

Question

На нашем сайте я показываю несколько изображений. Кроме того, мы разрешаем пользователям загружать изображения или просматривать изображения с внешнего источника URL. Все изображения на сайте доступны через стандартные теги <img>, где для src задан соответствующий URL-адрес изображения.

При нажатии на изображение я хотел бы взять изображение и опубликовать его в API, который затем обработает изображение и вернет результат:

Base64 Encode :

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-адрес в запросе на публикацию, затем на сервере вы загружаете изображение и манипулируете им по своему усмотрению.

И поток к изображению, выбранный пользователем, Вы отправляете файл на сервер и манипулируете им как хотите.