最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

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

网站源码admin34浏览0评论

当我在 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
  });`
回答如下:
发布评论

评论列表(0)

  1. 暂无评论