Existe-t-il un plug-in de capture d'écran implémenté dans React ?

Il existe des plug-ins de capture d'écran dans React, tels que le composant de capture d'écran React "react-cropper", qui peut réaliser la fonction de recadrage d'image. La méthode d'utilisation est la suivante : installez d'abord "react-cropper" puis ; obtenez-le via getCroppedCanvas et d'autres méthodes. Des images recadrées suffisent.

L'environnement d'exploitation de ce tutoriel : système Windows7, version React17.0.1, ordinateur Dell G3.

Recommandations associées : "Tutoriel React"

Comment utiliser le composant de capture d'écran React React-cropper

Lors de l'utilisation de React Pendant le développement, nous rencontrons souvent la situation de télécharger des images. Si nous voulons que les images téléchargées répondent à certaines spécifications, nous devons alors recadrer les images téléchargées sur le client. À ce stade, nous pouvons utiliser ce composant de recadrage d'image. peut nous aider à implémenter facilement la fonction de recadrage d'image.

Les étapes d'utilisation sont les suivantes :

1. Installation :

npm install --save-dev react-cropper

2 La méthode d'utilisation est la suivante :

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;

Ces deux phrases présentent. le composant Cropper et son composant Style, Cropper possède également quelques attributs couramment utilisés :

src : src est le src de l'image à recadrer, généralement l'encodage Base64 de l'image lue par le composant supérieur

aspectRatio : Il s'agit de contrôler la proportion de l'image recadrée

Il y a également un bouton en bas de la zone de recadrage pour confirmer s'il faut recadrer. De ce qui précède, nous pouvons voir ses événements liés :

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

this.cropper nous permet d'utiliser L'attribut ref de React enregistre la référence du nœud DOM du composant Cropper. Si vous n'êtes pas sûr, vous pouvez consulter la documentation officielle de React. Ce composant fournit un getCroppedCanvas(). Cette méthode renvoie l'image recadrée. Nous pouvons utiliser

La méthode toDataURL() la convertit en codage Base64 et la télécharge dans le composant de niveau supérieur.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!