如何從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