Ist in React ein Screenshot-Plugin implementiert?

Es gibt Screenshot-Plug-Ins in React, z. B. die React-Screenshot-Komponente „React-Cropper“, die die Bildzuschneidefunktion implementieren kann. Die Verwendungsmethode ist: Zuerst „React-Cropper“ installieren und dann das zugeschnittene Bild abrufen über getCroppedCanvas und andere Methoden.

Die Betriebsumgebung dieses Tutorials: Windows7-System, React17.0.1-Version, Dell G3-Computer.

Verwandte Empfehlungen: „React-Tutorial“

So verwenden Sie die React-Screenshot-Komponente React-Cropper

Bei der Verwendung der React-Entwicklung stoßen wir häufig auf die Situation, Bilder hochzuladen, wenn Sie die hochgeladenen Bilder anpassen möchten Nach bestimmten Spezifikationen muss das hochgeladene Bild auf dem Client bis zu einem gewissen Grad zugeschnitten werden. Zu diesem Zeitpunkt können wir die Bildzuschneidekomponente React-Cropper verwenden, mit deren Hilfe wir die Bildzuschneidefunktion einfach implementieren können.

Die Verwendungsschritte sind wie folgt:

1. Die Verwendungsmethode ist wie folgt:

npm install --save-dev react-cropper

Diese beiden Sätze stellen die Cropper-Komponente bzw. ihren Stil vor Attribute:

src: src Dies ist die Quelle des zuzuschneidenden Bildes, normalerweise die Base64-Kodierung des von der oberen Komponente gelesenen Bildes.

aspectRatio: Dies dient zur Steuerung des Anteils des zugeschnittenen Bildes außerdem eine Schaltfläche am unteren Rand des Zuschneidefelds, um zu bestätigen, ob das Zuschneiden erfolgen soll. Oben können Sie die gebundenen Ereignisse sehen:

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;

this.cropper ermöglicht es uns, das ref-Attribut von „react“ zu verwenden, um die Referenz des DOM-Knotens zu speichern Wenn Sie sich nicht sicher sind, können Sie die offizielle React-Dokumentation lesen. Diese Komponente bietet eine getCroppedCanvas()-Methode. Wir können das zugeschnittene Bild zurückgeben Codierung und laden Sie es in die übergeordnete Komponente hoch.

Das obige ist der detaillierte Inhalt vonIst in React ein Screenshot-Plugin implementiert?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!