React に実装されたスクリーンショット プラグインはありますか?

reactには、画像の切り抜き機能を実現するreactスクリーンショットコンポーネント「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;

これらの 2 つの文は、 Cropper コンポーネントとその Style、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 属性により、Cropper コンポーネントの DOM ノードの参照が保存されます。よくわからない場合は、公式の React ドキュメントを確認してください。このコンポーネントは getCroppedCanvas() を提供します

toDataURL() メソッドを使用すると、画像が Base64 エンコードに変換され、上位コンポーネントにアップロードされます。

以上がReact に実装されたスクリーンショット プラグインはありますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。