Podczas tworzenia aplikacji internetowej jedną z najtrudniejszych rzeczy jest wstawianie obrazów za pomocą pól wejściowych i przycinanie ich zgodnie z danym współczynnikiem proporcji. Więc czytając ten artykuł, możesz rozwiązać te problemy wymienione powyżej podczas tworzenia projektu internetowego. Zacznijmy.🎊

KROK 1: Utwórz aplikację React JS

Musisz mieć Node >= 10.16i npm >= 5.6na swojej maszynie, aby stworzyć projekt React.

Użyj poniższych poleceń, aby utworzyć aplikację React w swoim ulubionym IDE i uruchomić.

Wybierz preferowaną nazwę aplikacji. npx create-react-app <application-name>

npx create-react-app image-crop
cd image-crop
npm start

npm i bootstrap react-bootstrap

KROK 2: Dodaj obraz z wyboru wejścia

Stwórzmy w tym celu formularz. Weź tag wejściowy i podaj typ jako plik i zaakceptuj wszystkie typy plików graficznych, jak poniżej.

Dodałem kilka, cssjak poniżej, możesz wystylizować swoją aplikację zgodnie z własnymi preferencjami.

Następnie musimy zapisać adres URL obrazu w stanie, obsługując zdarzenie on-change, gdy użytkownik wybiera obraz.

const [srcImg, setSrcImg] = useState(null);

const handleImage = async (event) => {
    setSrcImg(URL.createObjectURL(event.target.files[0]));
    console.log(event.target.files[0]);
};


return (
.
.
.
<input
    type="file"
    accept="image/*"
    onChange={handleImage}
/>
.
.
.

Metoda URL.createObjectURL()statyczna tworzy DOMStringzawierający adres URL reprezentujący obiekt podany w parametrze. Po prostu tworzy adres URL dla danego obiektu.

źródło: URL.createObjectURL() — Web API | MDN (mozilla.org)

KROK 3: Przycinanie obrazu

To jest głównym zadaniem artykułu. W tym celu wykorzystałem pakiet React-image-crop — npm (npmjs.com) . Jest łatwy w użyciu i ma wiele włączonych funkcji.

Cechy pakietu

• Responsywny (możesz użyć pikseli lub wartości procentowych).
• Dotyk włączony.
• Uprawy o dowolnym kształcie lub stałym aspekcie.
• Obsługa klawiatury do podsuwania zaznaczenia.
• Brak zależności/mały rozmiar (5 KB gzip).
• Minimalny/maksymalny rozmiar przycięcia.

Najpierw zainstaluj npmpakiet.

npm i react-image-crop

import ReactCrop from 'react-image-crop';

import 'react-image-crop/dist/ReactCrop.css';
//or
import 'react-image-crop/lib/ReactCrop.scss';

//save the image that used to be crop
const [image, setImage] = useState(null);
//change the aspect ratio of crop tool as you preferred
const [crop, setCrop] = useState({aspect:16/9});
//save the resulted image
const [result,setResult] = useState(null);

<div>
  <input
      type="file"
      accept="image/*"
      onChange={handleImage}
  />
</div>
<div>
    {srcImg && (
        <div>
            <ReactCrop
                style={{ maxWidth: "50%" }}
                src={srcImg}
                onImageLoaded={setImage}
                crop={crop}
                onChange={setCrop}
            />
            <Button
            >
                crop
            </Button>
        </div>
    )}
</div>

Jest to wywołanie zwrotne, które jest wyzwalane po załadowaniu obrazu.
Idealny do przycinania obrazów zgodnie z ich wymiarami podczas pracy z pikselami.

Zaimplementujmy funkcję przycinania:

const getCroppedImg = async () => {
    try {
        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
        );

        const base64Image = canvas.toDataURL("image/jpeg", 1);

        setResult(base64Image);

    } catch (e) {
        console.log("crop the image");
    }
};
return (
.
.
.
<Button onClick={getCroppedImg}>
    crop
</Button>
.
.
.

Obraz został pomyślnie przycięty. Teraz możemy go zapisać na serwerze, kiedy przesyłamy formularz.🎉

Oto finał App.jswygląda tak,

Wniosek

React Image Crop to doskonały pakiet, który można wykorzystać do kilku transformacji mediów. Przećwicz również te transformacje, aby były pomocne w Twoich przyszłych projektach. Mam nadzieję, że ten artykuł pomógł ci zrozumieć przycinanie obrazów. Spotkajmy się wkrótce z kolejnym ciekawym artykułem.

Dziękuję za przeczytanie mojego artykułu i Happy Learning 🙌😊

Zasoby

URL.createObjectURL() — Web API | MDN (mozilla.org)

Utwórz nową aplikację React — React (reactjs.org)

Ucz się więcej

React-image-crop — npm (npmjs.com)