export

[graficzny-chlopak]

How to export a cut picture?

[ryanb]

Croppr doesn't crop the image, it just provides you with the coordinates of the crop rectangle. It's up to you to do the cropping which could be done on the server side or the client side.

Here's an example of doing it on the client side with an HTML canvas.

const sourceImage = document.getElementById("sourceImage");
const croppr = new Croppr(sourceImage, {});

// When finished cropping
const cropRect = croppr.getValue();
const canvas = document.createElement("canvas");
const context = canvas.getContext("2d");
canvas.width = cropRect.width;
canvas.height = cropRect.height;
context.drawImage(
  croppr.imageEl,
  cropRect.x,
  cropRect.y,
  cropRect.width,
  cropRect.height,
  0,
  0,
  canvas.width,
  canvas.height,
);
const destinationImage = document.getElementById("destinationImage");
destinationImage.src = canvas.toDataURL();

You can do whatever else you want with the data url, such as put it in a hidden field or send it to the server over an AJAX request.