使用 React 图像裁剪包时，较高像素的图像无法在 React js 中正确裁剪

Question

我正在尝试裁剪和缩放图像，几乎已经按照我的要求完成了，但是使用高于 700 像素的图像，裁剪图像无法正确裁剪。

我尝试更改处理方式，但没有帮助。

我正在尝试上传大小超过 5 MB 且像素更高约超过 1000 * 1000 像素的图像。但是当我上传图像时，裁剪无法正常工作。

当我将图像大小调整为 670*700 像素左右时，裁剪效果很好。

我需要这方面的帮助或指导。

{manipulatedImage && (
<ReactCrop
                  className="reactcrop-style"
                  crop={crop}
                  onChange={(newCrop) => setCrop(newCrop)}
                  onComplete={onCropComplete}
                  minHeight={200}
                >
                  <div className="image-fiter-style">
                    <div style={{ width: "100%" }}>
                      <ImageFilter
                        image={manipulatedImage}
                        filter={filter !== "none" ? filter : undefined}
                        colorOne={[40, 250, 250]}
                        colorTwo={[250, 150, 30]}
                        style={{
                          width: "100%",
                          height: "auto",
                          transform: `scale(${imageZoomLevel / 100})`,
                          transformOrigin: "top left",
                        }}
                      />
                    </div>
                  </div>
                </ReactCrop>
              )}

const getCroppedImg = (imageSrc, crop) => {
    const image = new Image();
    image.src = imageSrc;

    return new Promise((resolve) => {
      image.onload = () => {
        const canvas = document.createElement("canvas");
        const zoomFactor = imageZoomLevel / 100; // Calculate zoom factor
        const pixelRatio = window.devicePixelRatio;
        
        const ctx = canvas.getContext("2d");
        canvas.width = crop.width * pixelRatio; // Adjust canvas size for zoom
        canvas.height = crop.height * pixelRatio;
        ctx.setTransform(pixelRatio, 0, 0, pixelRatio, 0, 0);
      ctx.imageSmoothingQuality = 'high';

        ctx.drawImage(
          image,
          crop.x * zoomFactor, // Adjust crop position for zoom
          crop.y * zoomFactor,
          crop.width * zoomFactor,
          crop.height * zoomFactor,
          0,
          0,
          crop.width ,
          crop.height 
        );

        canvas.toBlob((blob) => {
          const croppedImageUrl = URL.createObjectURL(blob);
          resolve(croppedImageUrl);
        }, "image/jpeg");
      };
    });
  };

这是我的反应裁剪代码。

Answer 1

创建用于裁剪的画布时，您正在调整画布大小以进行缩放，但还将画布宽度和高度设置为

crop.width

和

crop.height

。这可能会在裁剪高分辨率图像时导致问题。在处理类似的用例时，我觉得为画布设置固定大小并相应地调整裁剪坐标会更好。这样的事情可以帮助确保小图像和大图像的裁剪效果一致：

const canvas = document.createElement("canvas");
const ctx = canvas.getContext("2d");

// Set a fixed canvas size for cropping
canvas.width = crop.width;
canvas.height = crop.height;

// Adjust crop coordinates for zoom
const zoomFactor = imageZoomLevel / 100;
const scaledCrop = {
  x: crop.x * zoomFactor,
  y: crop.y * zoomFactor,
  width: crop.width * zoomFactor,
  height: crop.height * zoomFactor,
};

ctx.drawImage(
  image,
  scaledCrop.x,
  scaledCrop.y,
  scaledCrop.width,
  scaledCrop.height,
  0,
  0,
  crop.width,
  crop.height
);

此外，应该在较长的代码中进行更多的错误处理。例如：

return new Promise((resolve, reject) => {
  image.onload = () => {
    // You code

    image.onerror = (error) => {
      reject(error);
    };
  };

  image.onerror = (error) => {
    reject(error);
  };
});

最后一个建议是考虑服务器端裁剪。对于非常大的图像，在服务器端执行裁剪和调整大小通常更有效。您可以将图像上传到服务器，使用服务器端库或服务（例如 Cloudinary 或 ImageMagick）对其进行处理，然后将处理后的图像发送回客户端。以下是如何以这种方式裁剪和调整图像大小的基本示例：

// Example URL to crop and resize an image using Cloudinary
const imageUrl = cloudinary.url('your-image', {
  width: 500,     
  height: 700, 
  crop: 'fill',    // Crop mode 
  gravity: 'auto', // Crop positioning
});

希望这能解决您的问题。