React-Cropperは写真の裁断を実現します.

React-Cropperは写真の裁断を実現します.
記事の目次

React-Cropper写真クロップ

使用時に発生した問題

1.this.cropper.get CroppedCanvas is not a function

.ロードするには、画像を裁断する必要があります.

.伝来問題

導入依存と引用

コンポーネントの一般的な属性の詳細解

使用上の問題
1.this.cropper.get CroppedCanvas is not a function
公式サイトによると

~Support for ref has been removed.~~Use the onInitialized method to get the cropper instance.Added back ref support in 2.10.

以下のような書き方がサポートされていないことが分かります.this.refs.cropper.get CroppedCanvas().toData URL()にthis.ropper.get CroppedCanvas is not a functionが現れます.

<Cropper
              src={
     this.state.cropSrc} 
              //     ，  base64  ， Upload         
              style={
     {
      height: 400 }}
              preview='.cropper-preview'
              className='company-logo-cropper'
              viewMode={
     1} //   cropper     
              zoomable//         
              aspectRatio={
     1} // image    
              guides //            
              background //           
              rotatable={
     false}
              ref='cropper'//       ref    
            /> 

公式サイトの説明に従って、次のように書くべきです.

 <Cropper
          src={
     this.state.cropSrc} 
          //     ，  base64  ， Upload         
          style={
     {
      height: 400 }}
          preview='.cropper-preview'
          className='company-logo-cropper'
          viewMode={
     1} //   cropper     
          zoomable//         
          aspectRatio={
     1} // image    
          guides //            
          background //           
          rotatable={
     false}
          //ref='cropper'//       ref    ，     
          crop={
     this._crop.bind(this)}
          onInitialized={
     this.onCropperInit.bind(this)}
        /> 
onCropperInit=cropper => {
      this.cropper = cropper }

2.ロードするには画像を裁断する必要があります.

//      
 beforeUpload =  file  => {
     
  console.log('123',  file ,  file [0].fileObj)
  let {
      fileObj } =  file [0]
  let reader = new FileReader()
  reader.readAsDataURL(fileObj)
  let _this = this
  reader.onload =  e  => {
     
   _this.setState({
     
​    cropSrc:  e .target.result,
​    cropVisible: true,
   })
  }
  return false
 }

beforeUploadはantdコンポーネントFileUploadの一つの属性であり、写真をアップロードする前に操作することができます.
FileReaderを利用して、fileファイルの画像base 64フォーマットをCropperのsrcに転送します.
3.参問題
一般的なバックグランドは一つのファイルを転送することを要求します.

let imgName = `${
       new Date().getTime()}.png` //              
//         
//base64  
let file1 = this.cropper.getCroppedCanvas().toDataURL()
//BLOB (binary large object)，      ，               。
this.cropper.getCroppedCanvas().toBlob(async blob => {
     

  //           
  let formData = new FormData()
  //         
  formData.append('file', blob, imgName)
  this.tpsc(formData)//            
})

依存と参照をインポート

npm install react-cropper      

import '../../../node_modules/cropperjs/dist/cropper.css'//    （          ） 
import Cropper from 'react-cropper' //   Cropper

コンポーネントの一般的なプロパティの詳細
(出所を詳しく説明するhttps://blog.csdn.net/jjyq2009/article/details/87229730)
整理しました(*代表がよく使う)
属性
タイプ
defaultデフォルト値
意味を解く
*view Mode-ビューモード
Number
0
裁断器の表示モードを指定します.0:裁断枠は画布の外側に展開できます.1,2,3は裁断枠をキャンバスのサイズに制限します.2または3はキャンバスを容器に制限します.
*dragMode-ドラッグモード
String
‘crop’
トリミングのドラッグモードを定義します.options'crop':新しい裁断枠を作成します.'move'を移動します.canvas'none'を移動します.何もしません.
*aspectRatio-アスペクト比
Number
NaN
裁断枠のアスペクト比を設定します.
*data-初期化イメージデータ
Object
null
以前のデータを保存したら、自動的にsetsDataメソッドに転送します.
＊src
を選択します.
を選択します.
画像リソースの読み込みを裁断する必要があります.
*preview-プレビュー
String(jQuery selector)
''
プレビューに追加の要素(容器)を追加します.最大幅(高さ)はプレビュー容器の初期幅(高さ)です.aspectRatioオプションが設定されている場合は、プレビュー容器を同じアスペクト比で設定してください.プレビューが正しく表示されていない場合は、プレビュー容器にoverflow:hiddenを設定してください.
*レスポンス(リアルタイム応答)
ボロア
true
ウィンドウのサイズを変更して、トリミングを再描画します.
ストール
ボロア
true
ウィンドウのサイズを変更すると、トリミング領域が復元されます.
checkCross Origin
ボロア
true
現在の画像がソース画像であるかどうかを確認します.もしクローン画像の場合、クローニングされた画像要素にクリossOrigin属性を追加して、タイムスタンプをsrc属性に追加して、ソース画像を再読み込みして、ブラウザのキャッシュミスを避けるためです.crossQrigin属性を画像に追加することで、画像urlにタイムスタンプを追加し、画像の再ロードを停止します.画像のcrossOrigin属性値が「use-credentials」であれば、XMLHttpRequestで画像データを読み込むとき、withCredentials属性はtrueに設定されます.
check Orientation
ボロア
true
現在の画像のExif Orientation informationをより正確にチェックし、回転または反転画像のOrientation値を読み取って、Orientation値を1(default)で上書きします.iOSデバイスに問題が発生しないようにします.いくつかのjpg画像には間違った方向の値があるからです.Typed Arays support(IE 10+)が必要です.
*modal
ボロア
true
画像の上と裁断枠の下に黒いモーダルが表示されます.
*ガイド
ボロア
true
裁断枠の破線を表示します.
＊センター
ボロア
true
裁断枠にセンターインジケータを表示します.
*highlight
ボロア
true
裁断枠に白いモーダルを表示します.(裁断枠を強調表示します.)
*background
ボロア
true
コンテナのグリッドの背景を表示します.
＊aut Crop
ボロア
true
初期化時に自動切り取り画像を有効にします.
aut CropArea
Number
0.8(80%)
0と1の間の数値で、自動裁断範囲のサイズ(パーセント)を定義します.
*movable
ボロア
true
画像の移動を有効にする
*ratotable(回転可能)
ボロア
true
回転画像を有効にする
*scalable(スケーリング可能)
ボロア
true
Enbale to scale theイメージ
zoomable
ボロア
true
Enbale to zoom the mage
*zoom OnTouch
ボロア
true
ドラッグで画像の拡大縮小を有効にします.
*zoom OWheel
ボロア
true
マウスホイールで画像を拡大縮小することを有効にします.
＊wheelZoomRatio
Number
0.1
スクロールローラーで拡大縮小する場合のズーム倍率
*cropBoxMovable
ボロア
true
ドラッグによる切り取り枠の移動を有効にします.
*cropBoxResizable
ボロア
true
ドラッグによる切り取り枠のサイズ変更を有効にします.
*toggaleDragModeOnblclick
ボロア
true
クロップをダブルクリックして、「crop-再定義トリミング」と「move-トリミング」モードで切り替えます.
ミニコンタイナーWidth
Number
200
容器の最小幅
ミニコンタイナーHeight
Number
100
容器の最小高さ
minCanvas Width
Number
0
キャンバスの最小幅
minCanvas Height
Number
0
キャンバスの最小高さ(画像包装器).
minCrop BoxWidth
Number
0
キャンバスの最小高さ(画像包装器).
minCrop BoxHeight
Number
0
カットボックスの最小高さ.このサイズは、画像ではなくページに対してです.
ready
機能
null
A shartcut of the「ready」イベント.
cropstart
機能
null
A shartcut of the「cropstart」イベント.
cropmove
機能
null
Aショートカットof the「cropmove」イベント.
cropend
機能
null
Aショートカットof the「cropend」イベント.
*crop
機能
null
A shartcut of the「crop」イベント.
ズーム
機能
null
A shartcut of the「zoom」イベント.