Question

我正在尝试让Cropper.js在Web上处理URL图像。

https://github.com/fengyuanchen/cropperjs

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

从原点“空”被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

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

希望它会起作用！

如何使Cropper.js处理URL中的图像

1 个答案: