javascript - 如何从cropper js获取裁剪图像？

Question

我正在尝试从cropperjs 获取裁剪的图像结果，但我不知道如何获取它。我试图在网上搜索，但找不到解决方案。

我的代码如下所示。

$(function () 
  {


  $image=null;

  var img = document.createElement("IMG");
  img.src = "";
  img.setAttribute('id', "showImage");
  document.getElementById("img-container").appendChild(img);

  var url = canvas.toDataURL();
  canvasImage.src = url;
  console.log(canvasImage);

  document.getElementById("showImage").src=canvasImage.src;
  $image = $('#showImage');
  $image.cropper({
    movable: true,
    zoomable: false,
    rotatable: false,
    scalable: false
  });

  $('#replace').on('click', function () {   
    var croppedimage = new Image();
    var cropBoxData = $image.cropper('getCropBoxData');
    croppedimage=$image.data('cropper');
    // croppedimage= this.cropper.
    console.log($image);
  });
});

Answer 1

$('#replace').on('click', function () {   
    var croppedimage = $image.getCroppedCanvas().toDataURL("image/png");
    console.log(croppedimage);
});

你可以得到base64