Zoom in and out doesn't work properly

[Mubasher Mukhtar]

zoom functionality doesn't work properly.
if i click on zoom-in even after delay then click on zoom-out it zoom-in the image

import { useEffect, useRef, useState } from "react";
import { Cropper, CircleStencil, CropperPreview } from "react-advanced-cropper";
import "react-advanced-cropper/dist/style.css";

import profile from "@/assets/images/profile.jpg";
import { debounce } from "../ImageCrop/utils/utils";

export default function AdvanceCropper() {
    const [image, setImage] = useState(profile);

    const cropperRef = useRef(null);
    const previewRef = useRef(null);
    const imageRef = useRef(null);
    const zoomRef = useRef(1);

    const [coordinates, setCoordinates] = useState(null);
    const [previewState, setPreviewState] = useState({
        state: null,
        image: null,
        transitions: null,
    });

    const onImageChange = (e) => {
        const { files } = e.target;
        if (files && files[0]) {
            // Create the blob link to the file to optimize performance:
            const blob = URL.createObjectURL(files[0]);
            console.log("blob", blob);
            // Get the image type from the extension. It's the simplest way, though be careful it can lead to an incorrect result:
            setImage(blob);
        } else {
            setImage("");
        }
    };

    const onChange = (cropper) => {
        console.log(cropper.getCoordinates(), cropper.getCanvas());
        // console.log(cropper.getCoordinates(), cropper.getCanvas()?.toDataURL?.()); // toDataURL bad approach
    };

    const onUpdate = (cropper) => {
        setPreviewState({
            state: cropper.getState(),
            image: cropper.getImage(),
            transitions: cropper.getTransitions(),
            loaded: cropper.isLoaded(),
            loading: cropper.isLoading(),
        });
    };

    const zoomIn = (val) => {
        // if (parseFloat(val)) {
        if (zoomRef.current + 1 <= 5) {
            if (cropperRef.current) {
                zoomRef.current += 1;
                console.log(zoomRef.current);
                cropperRef.current.zoomImage(zoomRef.current); // zoom-in 2x
            }
        }
        // }
    };
    const zoomOut = (val) => {
        // if (parseFloat(val)) {
        if (zoomRef.current - 1 >= 0) {
            if (cropperRef.current) {
                zoomRef.current -= 1;
                console.log(zoomRef.current);
                cropperRef.current.zoomImage(zoomRef.current); // zoom-in 2x
            }
        }
        // }
    };

    useEffect(() => {
        return () => {
            if (image) {
                URL.revokeObjectURL(image);
            }
        };
    }, [image]);

    return (
        <section className="advance-cropper-container">
            <section className="image-picker">
                <div className="upload-example">
                    <div className="buttons-wrapper">
                        <button className="button">
                            <label htmlFor="uploadImage">Upload image</label>
                            <input
                                ref={imageRef}
                                type="file"
                                accept="image/*"
                                id="uploadImage"
                                onChange={onImageChange}
                            />
                        </button>
                    </div>
                </div>

                <div className="zoom-actions">
                    <button onClick={debounce(zoomIn, 500)}>Zoom +</button>
                    <button onClick={debounce(zoomOut, 500)}>Zoom -</button>
                </div>
            </section>

            <div className="advance-cropper-settings">
                <Cropper
                    src={image}
                    ref={cropperRef}
                    onChange={onChange}
                    className={"cropper"}
                    stencilProps={{
                        grid: true,
                    }}
                    onUpdate={onUpdate}
                />

                <CropperPreview ref={previewRef} className="preview" {...previewState} />
            </div>
        </section>
    );
}

[Norserium]

@Mubasher-Skylinx, could you create the codesandbox to reproduce the issue?

[Mubasher Mukhtar]

here it is https://codesandbox.io/s/proud-pine-hqv9gj?file=/src/App.js

[Norserium]

@Mubasher-Skylinx, the image zoom is relative.

So, to upscale image twice you need to write:

cropperRef.current.zoomImage(2);

To downscale image twice you need to write:

cropperRef.current.zoomImage(0.5);

There is the codesandbox.

[Mubasher Mukhtar]

ok understood. Thank you. I think you should update the code on your documentation. thank you

[Norserium]

@Mubasher-Skylinx, you are welcome!