1

我正在尝试让 Cropper.js 处理来自网络的 URL 图像。

https://github.com/fengyuanchen/cropperjs

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

CORS 策略已阻止来自来源的“null”：请求的资源上不存在“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) {}
        });
      });
    });
  });
});
4

1 回答 1

1

您可以使用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) {}
    });
}

希望它会奏效！

于 2019-04-02T09:36:52.290 回答