当我在 Cropper.js 中使用缩放时,裁剪期间居中裁剪图像有一些问题

编程入门 行业动态 更新时间:2024-10-06 06:45:51

当<a href=https://www.elefans.com/category/jswz/34/1771440.html style=我在 Cropper.js 中使用缩放时,裁剪期间居中裁剪图像有一些问题"/>

当我在 Cropper.js 中使用缩放时,裁剪期间居中裁剪图像有一些问题

我在 Cropper.js 中有问题,我想要的是,我想在裁剪时缩放我的图像,然后我的 cropBox 应该在中心,同时拖动和修改它,当我裁剪一些图像时,这个图像应该居中。所以,如果我删除缩放逻辑,这段代码可以正常工作,但是当我缩放逻辑和计算时,它是不正确的:(并且在 cropbox 中我有不同的图像。有人可以帮助我或建议更好的方法来做到这一点

有我的代码片段

 `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
  });`
回答如下:

更多推荐

当我在 Cropper.js 中使用缩放时,裁剪期间居中裁剪图像有一些问题

本文发布于:2024-05-30 10:14:20,感谢您对本站的认可!
本文链接:https://www.elefans.com/category/jswz/34/1770385.html
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。
本文标签:我在   缩放   图像   js   Cropper

发布评论

评论列表 (有 0 条评论)
草根站长

>www.elefans.com

编程频道|电子爱好者 - 技术资讯及电子产品介绍!