Khi xây dựng một ứng dụng web, một trong những điều khó khăn nhất là chèn hình ảnh bằng cách sử dụng các hộp nhập liệu và cắt chúng theo một tỷ lệ khung hình nhất định. Vì vậy, bằng cách đọc bài viết này, bạn có thể giải quyết những rắc rối được đề cập ở trên khi phát triển một dự án web. Hãy bắt đầu.

BƯỚC 1: Tạo ứng dụng React JS

Bạn sẽ cần phải có Node >= 10.16và npm >= 5.6trên máy của mình, để tạo một dự án phản ứng.

Sử dụng các lệnh dưới đây để tạo một ứng dụng phản ứng trong IDE yêu thích của bạn và chạy.

Chọn tên ứng dụng bạn muốn. npx create-react-app <application-name>

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

npm i bootstrap react-bootstrap

BƯỚC 2: Thêm hình ảnh từ lựa chọn đầu vào

Hãy tạo một biểu mẫu cho mục đích này. Lấy thẻ đầu vào và cung cấp loại dưới dạng tệp và chấp nhận tất cả các loại tệp hình ảnh như bên dưới.

Tôi đã thêm một số cssnhư bên dưới, Bạn có thể tạo kiểu ứng dụng của mình theo ý muốn.

Sau đó, chúng tôi phải lưu URL của hình ảnh ở trạng thái bằng cách xử lý sự kiện on-change khi người dùng chọn hình ảnh.

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}
/>
.
.
.

Các URL.createObjectURL()phương pháp tĩnh tạo ra một DOMStringchứa một URL đại diện cho đối tượng nhất định trong tham số. Đơn giản là nó tạo ra một URL cho đối tượng nhất định.

source: URL.createObjectURL () - Web API | MDN (mozilla.org)

BƯỚC 3: Cắt hình ảnh

Tis là nhiệm vụ chính của bài báo. Vì mục đích này, tôi đã sử dụng gói react-image-crop - npm (npmjs.com) . Nó rất dễ sử dụng và có nhiều tính năng được kích hoạt.

Các tính năng của gói

• Đáp ứng (bạn có thể sử dụng pixel hoặc tỷ lệ phần trăm).
• Đã bật cảm ứng.
• Các cây trồng dạng tự do hoặc cố định.
• Hỗ trợ bàn phím để di chuyển lựa chọn.
• Không có phụ thuộc / dấu chân nhỏ (5KB gzip).
• Kích thước cắt tối thiểu / tối đa.

Đầu tiên hãy cài đặt npmgói.

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>

Đây là một lệnh gọi lại được kích hoạt khi hình ảnh được tải.
Lý tưởng để cắt hình ảnh theo kích thước của chúng khi làm việc với pixel.

Hãy thực hiện chức năng cắt xén:

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>
.
.
.

Hình ảnh đã được cắt thành công. Bây giờ chúng tôi có thể lưu nó trên một máy chủ khi chúng tôi gửi biểu mẫu.🎉

Đây là kết quả cuối cùng App.jsnhư thế nào,

Phần kết luận

React Image Crop là một gói tuyệt vời có thể được sử dụng cho một số chuyển đổi phương tiện. Thực hành các phép biến đổi đó, vì vậy chúng sẽ hữu ích trong các dự án tương lai của bạn. Tôi hy vọng bài viết này đã giúp bạn hiểu về việc cắt xén hình ảnh. Hãy cùng gặp gỡ với một bài viết thú vị khác ngay sau đây.

Cảm ơn bạn đã đọc bài viết của tôi và Chúc bạn học vui vẻ 🙌😊

Tài nguyên

URL.createObjectURL () - API web | MDN (mozilla.org)

Tạo một ứng dụng React mới - React (reactjs.org)

Tìm hiểu thêm

react-image-crop - npm (npmjs.com)