반응에 스크린샷 플러그인이 구현되어 있나요?

반응 스크린샷 구성요소인 "react-cropper"와 같은 스크린샷 플러그인이 있는데, 이를 사용하면 먼저 "react-cropper"를 설치한 다음 자른 이미지를 얻습니다. getCroppedCanvas 및 기타 방법을 통해 가능합니다.

이 튜토리얼의 운영 환경: windows7 시스템, React17.0.1 버전, Dell G3 컴퓨터.

관련 권장 사항: "react 튜토리얼"

React 스크린샷 구성 요소인 React-Cropper를 사용하는 방법

React 개발을 사용하다 보면 업로드된 사진을 준수하게 만들고 싶은 경우가 종종 있습니다. 특정 사양에 따라 업로드된 이미지는 클라이언트에서 어느 정도 잘라져야 합니다. 이때, 이미지 자르기 기능을 쉽게 구현하는 데 도움이 되는 React-Cropper 이미지 자르기 컴포넌트를 사용할 수 있습니다.

사용 단계는 다음과 같습니다.

1. 설치:

npm install --save-dev react-cropper

2. 사용 방법은 다음과 같습니다.

import React from 'react'
import Cropper from 'react-cropper'
import 'cropperjs/dist/cropper.css'
import {Button} from 'antd'
export default class Crop extends React.Component {
    constructor() {
        super();
        this.cropImage = this.cropImage.bind(this);
    }
    cropImage() {
        if (this.cropper.getCroppedCanvas() === 'null') {
            return false
        }
        this.props.getCropData(this.cropper.getCroppedCanvas().toDataURL())
    }
    render() {
        return (
            <div>
                <div style={{width: &#39;100%&#39;}}>
                    <Cropper
                        src={this.props.src}
                        ref={cropper => {
                            this.cropper = cropper;
                        }}
                        style={{height: 400, width: &#39;100%&#39;}}
                        aspectRatio={246/346}
                        guides={false}
                    />
                </div>
                <div>
                    <Button type="primary" size="large" onClick={this.cropImage}
                     style={{marginTop: &#39;10px&#39;}}>
                        确认裁剪
                    </Button>
                </div>
            </div>
        );
    }
}
import Cropper from &#39;react-cropper&#39;
import &#39;cropperjs/dist/cropper.css&#39;

이 두 문장은 각각 Cropper 구성 요소와 그 스타일을 소개합니다. 속성:

src: src 잘라낼 이미지의 src이며 일반적으로 상위 구성 요소에서 읽은 이미지의 Base64 인코딩입니다.

aspectRatio: 잘려진 이미지의 비율을 제어하기 위한 것입니다. 또한 자르기 상자 하단에 있는 버튼을 통해 자르기 여부를 확인할 수 있습니다. 위에서 바인딩된 이벤트를 볼 수 있습니다.

cropImage() {
        if (this.cropper.getCroppedCanvas() === 'null') {
            return false
        }
        this.props.getCropData(this.cropper.getCroppedCanvas().toDataURL())
    }

this.cropper를 사용하면 React의 ref 속성을 사용하여 DOM 노드의 참조를 저장할 수 있습니다. 확실하지 않은 경우 공식 React 문서를 읽어보세요. 이 구성 요소는 getCroppedCanvas() 메서드를 제공하며

toDataURL() 메서드를 사용하여 Base64로 변환할 수 있습니다. 인코딩하여 상위 컴포넌트에 업로드합니다.

위 내용은 반응에 스크린샷 플러그인이 구현되어 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!