如何从cropper js获取裁剪图像？答案

【问题标题】：How to get cropped image from cropper js?如何从cropper js获取裁剪图像？
【发布时间】：2017-05-11 16:32:35
【问题描述】：

我正在尝试从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);
  });
});

【问题讨论】：

请向我们展示您的 HTML 并描述您的代码无法使用的地方
您必须将其发送到服务器才能实际为您裁剪。
其实我在做一个应用程序首先我在画布上渲染了pdf，然后我把它转换成图像，在上面应用了cropper。我实际上想裁剪 pdf 文件的某些区域并将该图像发送到 OCR 库。
$('#replace').on('click', function () { var croppedimage = new Image(); var cropBoxData = $image.cropper('getCropBoxData');croppedimage=$ image.data('cropper'); //croppedimage= this.cropper.console.log($image); });在这部分，我希望裁剪器为我裁剪图像。
@JosanIracheta 我该怎么做请告诉我，我会非常感谢你。

标签： javascript html5-canvas cropperjs

【解决方案1】：

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

你可以得到base64

【讨论】：

我必须这样做：$image.cropper('getCroppedCanvas').toDataURL("image/png");。效果很好！