Как я могу заставить Cropper.js работать с изображениями из URL

Question

Я пытаюсь заставить Cropper.js работать с изображениями URL из Интернета.

https://github.com/fengyuanchen/cropperjs

Работает нормально, когда я загружаю изображение со своего устройства, но когда дело доходит до сетевой картинки ... У меня тонны ошибок, в том числе:

Из источника «null» был заблокирован политикой CORS: в запрошенном ресурсе отсутствует заголовок «Access-Control-Allow-Origin».

Кроппер не появляется на изображении, и я дал ошибку Cors.

Вот мой код:

$(function($) {
  $("#submit").click(function() {
    var selectedFile = $("#imglink").val();
    $("#photo").attr("src", selectedFile);
    var image = document.getElementById("photo");
    console.log(image);
    const cropper = new Cropper(image, {
      aspectRatio: 16 / 9,
      cropBoxResizable: false
    });
    cropper.crop();
    $("#crop-button").on("click", function() {
      cropper.getCroppedCanvas().toBlob(function(blob) {
        const formData = new FormData();
        formData.append("croppedImage", blob);
        $.ajax({
          type: "POST",
          url: "img/index.php",
          data: formData,
          processData: false,
          contentType: false,
          success: function(data) {},
          error: function(err) {}
        });
      });
    });
  });
});

Answer 1

Вы можете использовать функцию toDataURL canvas для преобразования изображения в base64, а затем снова загрузить его в image.src.

var canvas = cropper.getCroppedCanvas()

//replacing the image url with base64 data
image.src = canvas.toDataURL(); 

canvas.toBlob(function(blob) {
    const formData = new FormData();
    formData.append("croppedImage", blob);
    $.ajax({
      type: "POST",
      url: "img/index.php",
      data: formData,
      processData: false,
      contentType: false,
      success: function(data) {},
      error: function(err) {}
    });
}

Надеюсь, это сработает!