IndexSizeError: Index or size is negative or greater than the allowed amount (Firefox)

Works just fine on Chrome but in Firefox I got this error.

import React, { useState, useEffect, useCallback, useRef } from 'react';
import ReactCrop from 'react-image-crop';
import 'react-image-crop/dist/ReactCrop.css';
import { Typography } from '@material-ui/core';
import { Row, Col } from 'reactstrap';
import Modal from 'react-bootstrap/Modal';

function getResizedCanvas(canvas, newWidth, newHeight) {
    const tmpCanvas = document.createElement('canvas');
    tmpCanvas.width = newWidth;
    tmpCanvas.height = newHeight;

    const ctx = tmpCanvas.getContext('2d');

    ctx.drawImage(
        canvas,
        0,
        0,
        canvas.width,
        canvas.height,
        0,
        0,
        newWidth,
        newHeight
    );

    return tmpCanvas;
}

function generateDownload(previewCanvas, crop) {
    if (!crop || !previewCanvas) {
        return;
    }

    const dpr = window.devicePixelRatio || 1;
    const canvas =
        dpr !== 1
            ? getResizedCanvas(previewCanvas, crop.width, crop.height)
            : previewCanvas;

    canvas.toBlob(
        (blob) => {
            const previewUrl = window.URL.createObjectURL(blob);

            const anchor = document.createElement('a');
            anchor.download = 'cropPreview.png';
            anchor.href = URL.createObjectURL(blob);
            anchor.click();

            window.URL.revokeObjectURL(previewUrl);
        },
        'image/png',
        1
    );
}

export default function CropImageModal(props) {
    const { src, setImage, setImagePreview, isOpen, setIsOpen } = props;
    // const [upImg, setUpImg] = useState();
    const imgRef = useRef(null);
    const previewCanvasRef = useRef(null);
    const [previewUrl, setPreviewUrl] = useState(null);
    const [crop, setCrop] = useState({ aspect: 1 / 1 });
    const [completedCrop, setCompletedCrop] = useState(null);

    const handleCloseModal = () => {
        setIsOpen(false);
    };

    useEffect(() => {
        function createImageURL() {
            if (src) setPreviewUrl(URL?.createObjectURL(src));
            console.log(previewUrl);
        }
        createImageURL();
    }, [src]);

    const onLoad = useCallback((img) => {
        imgRef.current = img;
    }, []);

    useEffect(() => {
        if (!completedCrop || !previewCanvasRef.current || !imgRef.current) {
            return;
        }

        const image = imgRef.current;
        const canvas = previewCanvasRef.current;
        const crop = completedCrop;
        const dpr = window.devicePixelRatio || 1;

        const scaleX = image.naturalWidth / image.width;
        const scaleY = image.naturalHeight / image.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 * dpr,
            crop.height * dpr
        );
    }, [completedCrop]);

    return (
        <Modal
            show={isOpen}
            onHide={handleCloseModal}
            size="md"
            aria-labelledby="contained-modal-title-vcenter"
        >
            <Modal.Body>
                <Row
                    style={{
                        textAlign: 'center',
                        justifyContent: 'center',
                    }}
                >
                    <ReactCrop
                        src={previewUrl}
                        onImageLoaded={onLoad}
                        crop={crop}
                        onChange={(c) => setCrop(c)}
                        onComplete={(c) => setCompletedCrop(c)}
                    />
                    <div>
                        <canvas
                            ref={previewCanvasRef}
                            style={{
                                width: completedCrop?.width ?? 0,
                                height: completedCrop?.height ?? 0,
                            }}
                        />
                    </div>
                    <button
                        type="button"
                        disabled={
                            !completedCrop?.width || !completedCrop?.height
                        }
                        onClick={() =>
                            generateDownload(
                                previewCanvasRef.current,
                                completedCrop
                            )
                        }
                    >
                        Download cropped image
                    </button>
                </Row>
            </Modal.Body>
        </Modal>
    );
}

[JanderSilv]

Problem solved, you are awesome. Thanks for the attention again!!

[DominicTobias]

Hi, you’re right, this happens when trying to draw something on to a 0x0 canvas, well the crop values are also zero except for the X+Y but Firefox doesn’t like it.

Fixed in the demo, you can fix it by wrapping the drawing function in a conditional:

if (canvas.width && canvas.height) {
      ctx.drawImage(
        image,
        crop.x * scaleX,
        crop.y * scaleY,
        crop.width * scaleX,
        crop.height * scaleY,
        0,
        0,
        crop.width * dpr,
        crop.height * dpr
      );
    }