如何从cropper js中获取裁剪图像?

时间:2017-05-11 16:32:36

标签: javascript html5-canvas cropperjs

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

1 个答案:

答案 0 :(得分:3)

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

您可以获得base64