KonvaJS crop and resize

Question

I'm using KonvaJS to create a simple Image-Editor. As a base for the image resize function I used the code from the Konva Examples (Knonva JS Image Resize). But now I'm struggling with the implementation of a crop function. On a button click, I enable the user to draw a rectangle on the stage. I then use the built-in crop function on my image with the coordinates, width and height of the drawn rectangle and crop the image. But when I resize the image before I crop it the cropped area shows the part cropped from the original sized image.

Is there an easy, build in way I'm missing to be able to crop from the resized image? Or do I have to calculate the position and size of the drawn rectangle according to the resized values of the image, then crop that part and resize and reposition the result?

Crop Image:

function cropImage(x, y, width, height, activeLayer) {
  var image = activeLayer.get('Image')[0], xDiff = 0, yDiff = 0, newWidth, newHeight, newX, newY;
  // only Crop visible Parts of the Image
  if(x  < activeLayer.getX()) {
      xDiff = activeLayer.getX() - x;
  }
  if(y  < activeLayer.getY()) {
      yDiff = activeLayer.getY() - y;
  }
  if (x + width > activeLayer.getX() + activeLayer.width()) {
      width = width - ((x + width) - (activeLayer.getX() + activeLayer.width()));
  }
  if (y + height > activeLayer.getY() + activeLayer.height()) {
      height = height - ((y + height) - (activeLayer.getY() + activeLayer.height()));
  }
  newHeight = height - yDiff;
  newWidth = width - xDiff;
  newX = (x - activeLayer.getX()) + image.cropX() + xDiff;
  newY = (y - activeLayer.getY()) + image.cropY() + yDiff;

  image.width(newWidth);
  image.height(newHeight);
  activeLayer.width(newWidth);
  activeLayer.height(newHeight);
  activeLayer.setX(newX + activeLayer.getX() - image.cropX());
  activeLayer.setY(newY + activeLayer.getY() - image.cropY());
  image.crop({
    x : newX ,
    y : newY ,
    width : newWidth,
    height : newHeight
  });
  //Reposition anchors so topLeft Anchor is always in 0/0 of the grouplayer
  repositionAnchors(activeLayer);
  activeLayer.draw();
}

Answer 1

When resizing i preserve the ratio for width and height in an array and calculate the position and dimension of the rectangle which is drawn for the crop :

cropX = ((x  / ratios[id].width) - (activeLayer.getX() / ratios[id].width)) + (image.cropX()) + (xDiff / ratios[id].width);
cropY = ((y  / ratios[id].height)- (activeLayer.getY() / ratios[id].height)) + (image.cropY()) + (yDiff / ratios[id].height);
cropWidth = (width / ratios[id].width)  - (xDiff / ratios[id].width),
cropHeight = (height / ratios[id].height) - (yDiff / ratios[id].height)