Javascript 如何使crapper.js使用URL中的图像

我正在尝试让crapper.js处理来自web的URL图像

当我从我的设备上传图像时，它工作正常，但当涉及到在线图片时。。我有很多错误，包括：

来自源“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) {}
        });
      });
    });
  });
});

---

您可以使用canvas的

toDataURL

功能将图像转换为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) {}
    });
}

---

希望它能起作用

谢谢你的快速回答。实际上，我的问题是，当我从Url加载我的照片时，我会显示它，但不会出现裁剪器。我在这一点上有一个CORS错误。实际上，我试图从一个受保护的URL。。。。根本不可能工作。。。。再次感谢您的帮助。那么，问题只在于受保护的URL？如果是，那么你能在这里分享这个网址吗？我想。。。。我是随机选择的，我也面临同样的问题。上传效果很好，但问题是，当我用JS加载图像时，crapper.JS似乎正在再次访问S3的图像URL，并且失败，出现403错误