centered cropped image during croping have some problem while I am using zoomin in Cropper.js

Question

I have problem in Cropper.js , what I want is that , I want to zoom my image while cropping , then my cropBox should be in the center while draging and modyfing it and while I will crop some piece of image , this image should be in center . so , this code is working correctly if I will delete the zoom logic , but when I am zooming the logic and calculation is inccorect :( and inside the cropbox I have different piece of image . can someone help me or suggest better approach to do this ?

there is my code snippet

 var containerData = cropper.getContainerData();
  var canvasData = cropper.getCanvasData();
  var imageData = cropper.getImageData();
  var cropBoxData = cropper.getCropBoxData();
  var cropWidth = cropBoxData.width;
  var cropHeight = cropBoxData.height;
  var cropAspectRatio = cropWidth / cropHeight;

  console.log('Container data:', containerData);
  console.log('Canvas data:', canvasData);
  console.log('Image data:', imageData);
  console.log('Crop box data:', cropBoxData);
  console.log('Crop aspect ratio:', cropAspectRatio);


// ZOOM LOGIC
  // calculate the minimum and maximum zoom levels based on the aspect ratio
  var minZoom = Math.max(cropWidth / imageData.naturalWidth, cropHeight / imageData.naturalHeight);
  var maxZoom = Math.min(containerData.width / cropWidth, containerData.height / cropHeight);

  console.log('Minimum zoom level:', minZoom);
  console.log('Maximum zoom level:', maxZoom);

  // calculate the zoom level based on the aspect ratio
  var zoomLevel = cropAspectRatio > 1 ? maxZoom : minZoom;

  console.log('Zoom level:', zoomLevel);

  // zoom to the calculated zoom level
  cropper.zoomTo(zoomLevel);

  var zoomLevel = 1;






  // CENTER CROPBOX LOGIC
  // calculate the center of the crop box
  var cropBoxCenterX = cropBoxData.left + cropBoxData.width / 2;
  var cropBoxCenterY = cropBoxData.top + cropBoxData.height / 2;
  
  // calculate the center of the container
  var containerCenterX = containerData.width / 2;
  var containerCenterY = containerData.height / 2;
  
  // calculate the difference between the centers
  var deltaX = containerCenterX - cropBoxCenterX;
  var deltaY = containerCenterY - cropBoxCenterY;
  
  // move the crop box by the difference
  cropper.setCropBoxData({
    left: cropBoxData.left + deltaX,
    top: cropBoxData.top + deltaY
  });





//CENTER CROPED IMAGE LOGIC
    // calculate the left and top position of the cropped area
  var croppedLeft =  canvasData.left + cropBoxData.left - canvasData.width / 2 + cropBoxData.width / 2;
  var croppedTop = canvasData.top + cropBoxData.top - canvasData.height / 2 + cropBoxData.height / 2;

  console.log("croppedleft" + croppedLeft);
  console.log("croppedtop" + croppedTop);
  // calculate the left and top position of the cropped image
  //es ori
  var imgLeft = canvasData.left - croppedLeft;
  var imgTop = canvasData.top - croppedTop;
  
  console.log("imgtop" + imgTop);
  console.log("imgLeft" + imgLeft);
  console.log("canvasleft" + canvasData.left + imgLeft);
  console.log("canvastop" + canvasData.top + imgTop);
  // set canvas data to center the cropped image
  cropper.setCanvasData({
    left: canvasData.left + imgLeft,
    top: canvasData.top + imgTop
  });

Answer 1

Maybe you are missing the zoom value natural witdth of images