How to get cropped image from cropper js?

Question

I am trying to get cropped image result from cropperjs but I dont know how to get it. I tried to search online but couldn't find a solution.

My code is as given below.

$(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);
  });
});

Please show us your HTML and describe what doesn't work with your code — Alon Eitan, May 11 '17 at 16:34
you have to send it to the server to actually crop it for you. — JJJ, May 11 '17 at 16:36
Actually I am Making an Application First I rendered pdf on canvas, then I converted it into Image, applied cropper on it. I actually want to crop certain area of pdf file and send that image to OCR library. — Syed Ali Muqaddas Naqvi, May 11 '17 at 16:39
$('#replace').on('click', function () { var croppedimage = new Image(); var cropBoxData = $image.cropper('getCropBoxData'); croppedimage=$image.data('cropper'); // croppedimage= this.cropper. console.log($image); }); At This part I want that cropper to crop the image for me. — Syed Ali Muqaddas Naqvi, May 11 '17 at 16:41
@JosanIracheta How could I do that Please tell me I will be so thankful to you. — Syed Ali Muqaddas Naqvi, May 11 '17 at 16:42
Not 100% but yeah I was taking help online. Please guide me on the #replace click event. I want that if user clicks crop, I get another image in JS which the result of cropping. — Syed Ali Muqaddas Naqvi, May 11 '17 at 16:48

score 8 · Answer 1 · answered Feb 15 '20 at 08:23

8

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

you can get base64

answered Feb 15 '20 at 08:23

Jeeva

1,707
1
10
7

1

I had to do this: `$image.cropper('getCroppedCanvas').toDataURL("image/png");`. It worked great! – Jarad Oct 16 '20 at 22:05
@Jarad thanks for the comment, it worked for me i guess the older version (i'm using 2017) works witht this – Habib Rehman Nov 04 '22 at 06:25

score 0 · Answer 2 · answered May 04 '23 at 12:06

If you are using React, you should wait for the Cropper to be ready and then get the cropper instance (with imageData) from the ready event.

You can get the event like this:

const handleReady = useCallback((readyEvent: Cropper.ReadyEvent<HTMLImageElement>) => {
    const cropperInstance = readyEvent.currentTarget?.cropper;
    const imageData = readyEvent.currentTarget?.cropper.getImageData();
  }, []);


return (
  <Cropper
    ...
    ready={handleReady}
  />
);

How to get cropped image from cropper js?

2 Answers2