CODEWITHSUNDEEP
cssreactjscropperjscropper
Gagandeep Gambhir
Gagandeep Gambhir

Reputation: 4353

How can we modify the appearance of corner points in Cropper.js?

"I'm currently using Cropper.js in my project for image cropping functionality. However, I've encountered an issue where the corner points of the crop box don't match the design I need. How can I customize the appearance of Cropper.js, specifically the design of its corner points, edge points, or boundary color?

I've attempted to override the CSS of Cropper.js using selectors like .cropper-line.line-n, but unfortunately, it doesn't seem to have any effect. Despite trying various CSS overrides, the corner points remain unchanged.

enter image description here

import React, { useRef, useState, useEffect } from "react";
import Cropper from "cropperjs";
import "cropperjs/dist/cropper.css";

const ImageCropper = ({ imageUrl }) => {
  const cropperRef = useRef(null);
  const [croppedImageUrl, setCroppedImageUrl] = useState(null);

  useEffect(() => {
    const cropper =
      cropperRef.current &&
      new Cropper(cropperRef.current, {
        aspectRatio: 1,
        viewMode: 1,
        guides: true,
        minCropBoxWidth: 10,
        minCropBoxHeight: 10,
        background: false,
        responsive: true,
        checkOrientation: false,
      });

    return () => {
      cropper && cropper.destroy();
    };
  }, [imageUrl]);

  const handleCrop = () => {
    const cropper = cropperRef.current;
    if (!cropper) return;

    const croppedCanvas = cropper.getCroppedCanvas();

    const croppedDataUrl = croppedCanvas.toDataURL();

    setCroppedImageUrl(croppedDataUrl);
  };

  return (
    <div>
      <div>
        <img
          src={imageUrl}
          alt="Original"
          style={{ maxWidth: "100%" }}
          ref={cropperRef}
        />
      </div>
      <div>
        <button onClick={handleCrop}>Crop Image</button>
      </div>
      {croppedImageUrl && (
        <div>
          <h2>Cropped Image</h2>
          <img
            src={croppedImageUrl}
            alt="Cropped"
            style={{ maxWidth: "100%" }}
          />
        </div>
      )}
    </div>
  );
};

export default ImageCropper;

Upvotes: 0

Views: 81

Answers (1)

Sunil Sharma
Sunil Sharma

Reputation: 11

Share your css.

I tried below css and its working.

.cropper-point {
  width: 1rem;
  height: 1rem;
  border-radius: 100%;
}

Upvotes: 0

Related Questions