如何裁剪超出图像边界的图像，就像我想通过添加透明/白色边距从 4:3 图像制作 1:1 图像一样？

Question

Currently, I am using 'react-image-crop' package to crop my images. But the issue I am facing right now is that I need a 1:1 company logo to be uploaded by the client but if the shape of the image is not a square then the user will not be able to upload the whole logo and image cropping library will crop it to 1:1 and remove/strip some part of it. Whereas I want to make it like WhatsApp profile photo upload where it allows you to crop/reshape an image beyond its boundaries in order to make it 1:1 and add some blur. I just want to add white/transparent background to newly added space. Please let me know if there is a way to achieve this using 'react-image-crop' or any other package.

Side Note: Actually I need a 5:2 image instead of 1:1. 1:1 is easy to imagine/visualise that's why I took that example.

this is what my component looks like:

    export default function ImageCrop (props){
        const [img, setUpImg] = useState()
        const imgRef = useRef(null)
        const [crop, setCrop] = useState({ unit: 'px', width: 200, aspect: 5 / 2 })
        const [previewUrl, setPreviewUrl] = useState()
        
    
        useEffect(() => {
            
            onSelectFile(props.file)
        }
        ,[props.file])
        const onSelectFile = file => {
          
            const reader = new FileReader();
            reader.addEventListener('load', () => setUpImg(reader.result));
            reader.readAsDataURL(file);
          }
        
      
        const onLoad = useCallback(img => {
          imgRef.current = img;
        }, []);
      
        const makeClientCrop = async crop => {
          if (imgRef.current && crop.width && crop.height) {
            const cropped = await getCroppedImg(imgRef.current, crop, props.file.name);
            window.URL.revokeObjectURL(previewUrl);
              setPreviewUrl(window.URL.createObjectURL(cropped));
              props.updateBuffer(cropped)
             

 console.log(cropped)
        
      }
    };
  
    function getCroppedImg(image, crop, fileName) {
        const canvas = document.createElement('canvas');
        const scaleX = image.naturalWidth / image.width;
        const scaleY = image.naturalHeight / image.height;
        canvas.width = crop.width;
        canvas.height = crop.height;
        const ctx = canvas.getContext('2d');
       
        ctx.drawImage(
          image,
          crop.x * scaleX,
          crop.y * scaleY,
          crop.width * scaleX,
          crop.height * scaleY,
          0,
          0,
          crop.width,
          crop.height,
        );
       
        // As Base64 string
        // const base64Image = canvas.toDataURL('image/jpeg');
       
        // As a blob
        return new Promise((resolve, reject) => {
          canvas.toBlob(blob => {
            blob.name = fileName;
            resolve(blob);
          }, 'image/jpeg', 1);
        });
      }
   
    return (
      <div className="App">
        
        <ReactCrop
          src={img}
          onImageLoaded={onLoad}
          crop={crop}
          onChange={c => setCrop(c)}
          onComplete={makeClientCrop}
          style={{width: '50%'}}
        />
        {previewUrl && <img alt="Crop preview" src={previewUrl} />}
      </div>
    )
    }
    

Answer 1

At the moment you initialise the canvas dimensions in the getCroppedImg() method you could take the longest side of the loaded image and create a square canvas based on that value, then just centre the image horizontally or vertically accordingly

May be add extra pixels to W as a way of a margin to give you more room, and centre as suggested by Andreas in the comments