javaScript: cropperjs は非常に強力ですが、シンプルな画像トリミングツールです。

cropperjs は非常に強力ですが、シンプルな画像トリミングツールです.非常に柔軟に構成でき、携帯電話の使用をサポートし、IE9 以降を含む最新のブラウザーをサポートします。（重要なのは、使用方法が簡単で、数行のコードで実行できることです）

公式の github ドキュメント: GitHub - fengyuanchen/cropperjs: JavaScript 画像クロッパー。

公式ドキュメントは分かりやすいです.私の理解で翻訳しただけです.翻訳するのが面倒な場合は参照してください.不正確な点があるかもしれません. (キャンバス)、写真 (画像)、およびクロップボックス (クロップボックス) には、間違っている可能性のある場所がいくつかあります。最初にこの画像を見て理解してください。

# cropper - 裁剪图片 - IE9+

## 使用 cropperjs
```javascript
import Cropper from 'cropperjs'
import 'cropperjs/dist/cropper.css'
this.myCropper = new Cropper('被裁剪对象', '配置对象') //返回一个cropper对象

this.myCropper.getCroppedCanvas().toDataURL('image/jpeg') //拿到裁剪后的base64的图片
this.myCropper.getCropBoxData();    //获取裁剪框数据
this.myCropper.setCropBoxData();    //设置裁剪框数据
this.myCropper.getCanvasData();      //获取图片数据
this.myCropper.setCanvasData();      //设置图片数据

構成オブジェクト

GitHub - fengyuanchen/cropperjs: JavaScript 画像クロッパー
注: 最初の値はデフォルト値です

viewMode ビューコントロール
- 0 無制限
- 1 トリミング枠を写真の範囲を超えないように制限する
- 2 トリミング枠が画像の範囲を超えないように制限し、画像の塗りつぶしモードが最長の側面塗りつぶしでカバーされる
- 3 切り取り枠が画像の範囲を超えないように制限し、画像の塗りつぶしモードを設定して、最短辺を塗りつぶします
dragMode 画像ドラッグモード
- 新しいクロップボックスを形成する
- 移動画像は移動できます
- なし
initialAspectRatio クロップボックスの縦横比の初期値は、既定では画像の縦横比と同じで、aspectRatio が設定されていない場合にのみ使用できます。
アスペクト比はクロップボックスを固定アスペクト比に設定します
データの前に保存されたトリミングされたデータは、初期化中に自動的に設定され、autoCrop が true に設定されている場合にのみ使用可能になります
プレビュープレビューは、エリアコンテナを設定して、トリミングされた結果をプレビューします
- Element、Array (要素)、NodeList または String (セレクター)
レスポンシブウィンドウサイズ調整後のレスポンシブ再レンダリングデフォルト true
restore は、ウィンドウのサイズ変更後にクリッピングされた領域を復元します。デフォルトは true
checkCrossOrigin 画像がクロスドメインかどうかをチェックします. デフォルトは true. クロスドメインである場合, 属性 crossOrigin がコピーされた画像要素に追加され, タイムスタンプが src に追加されて, ブラウザの再読み込み時にブラウザのキャッシュによる読み込みエラーを回避します.画像。
checkOrientation 画像の方向情報を確認します (JPEG 画像のみがそれを持っています). デフォルトは true です. 画像を回転するとき, IOS デバイスでのいくつかの問題を解決するために画像の方向値に何らかの処理を行います.
画像とトリミングボックスの間に黒いマスクを表示するかどうか。デフォルトは true です。
guides クロップボックスの点線を表示するかどうか、デフォルトは true
center クロッピングボックスの中央に「+」インジケータを表示するかどうか。デフォルトは true です。
ハイライトクロップボックスに白いマスクを表示するかどうか (非常に明るい) default true
background コンテナーにグリッドのような背景を表示するかどうか。デフォルトは true です。
autoCrop は、デフォルトの true を使用してデータで初期化するときに、画像の自動トリミングを許可します
autoCropArea 画像を考慮してトリミングされた領域のサイズを設定し、値は 0 ～ 1 です. デフォルトの 0.8 は、領域の 80% を意味します
移動可能画像を移動できるかどうか。デフォルトは true
デフォルトで画像を回転できるかどうか true
画像をスケーリングできるかどうか (長さと幅を変更できます) デフォルト true
zoomable 画像をズームできるかどうか (焦点距離を変更) デフォルトは true
zoomOnTouch 画像をドラッグしてタッチすることでズームできるかどうか. デフォルトは true
zoomOnWheel マウスホイールで画像をズームできるかどうか。デフォルトは true
wheelZoomRatio は、マウスホイールのズームの感度を設定します。デフォルトは 0.1 です。
トリミングボックスをドラッグアンドドロップできるかどうか。デフォルトは true です。
cropBoxResizable トリミングボックスのサイズを変更できます。デフォルトは true
toggleDragModeOnDblclick 画像のドラッグアンドドロップモード (移動とトリミング) をダブルクリックで切り替えることができるかどうか. デフォルトは true です. 画像のドラッグアンドドロップモードが none の場合、切り替えることはできません. この設定には、ダブルクリックイベントをサポートします。
minContainerWidth (200), minContainerHeight (100), minCanvasWidth (0), minCanvasHeight (0), minCropBoxWidth (0), minCropBoxHeight (0) コンテナー、画像、トリミングボックスの最小幅と高さは既定値です。切り抜きボックスの高さ幅は画像ではなくページに対して相対的です

方法

注: メソッドが値を返すように設定されていない場合は、cropper のインスタンスが返されるため、複数のメソッドを連鎖させることができます。

切り抜きボックスを手動で表示するcrop()
reset() は、画像とクロッピングボックスを初期状態にリセットします
replace(url[, hasSameSize]) 画像パスを置き換えてクロップボックスを再構築します
- URL の新しいパス
- hasSameSize デフォルト値は false です。true に設定すると、古い画像と新しい画像のサイズが同じになり、トリミングボックスを再構築せずにパスを変更するだけで済みます。
enable() クロップボックスのフリーズを解除します
disable() クロップボックスをフリーズします
destroy() はトリミングボックスを破棄し、クロッパーインスタンスを削除します
move(offsetX[, offsetY]) 指定された距離に画像を移動します. 1 つのパラメータは、水平方向と垂直方向の同じ移動距離を表します
moveTo(x[, y]) 画像を指定されたポイントに移動します。パラメーターは、水平方向と垂直方向の同じ移動距離を表します
zoom(ratio) ズーム率 0 より大きいとズームインし、0 より小さいとズームアウトします
zoomTo(ratio[, pivot]) ズームして中心点の位置を設定する
回転(度) css に似た回転
rotateTo(degree) 絶対角度まで回転する
scale(scaleX[, scaleY]), scaleX(scaleX), scaleY(scaleY) パラメータのスケーリングは、同じ水平方向と垂直方向のスケーリング値を表します
getData([rounded]) は、元の画像に基づいてトリミング領域の位置とサイズを返します! 元のサイズ! rounded デフォルトは false で、丸められたデータを表示するかどうかを示します. これらのデータを使用すると、直接トリミングして画面に表示できます元の画像
setData(data) 元の画像に基づいてクリッピング領域の位置とサイズを変更します。viewMode が 0 でない場合にのみ有効です。
getContainerData()、getImageData()、getCanvasData()、setCanvasData(data)、getCropBoxData()、setCropBoxData(data) コンテナ、画像コンテナ(キャンバス)、画像、クロッピング領域相対コンテナデータの設定と取得
getCroppedCanvas([options]) トリミングされた画像のキャンバスオブジェクトを取得します. options は、このキャンバスのいくつかのデータを設定します
- width、height、minWidth、minHeight、maxWidth、maxHeight、fillColor、imageSmoothingEnabled (画像が滑らかかどうか、デフォルトは true)、imageSmoothingQuality (画像の品質はデフォルトで低と中、高)
setAspectRatio(aspectRatio) トリミング領域の縦横比を変更します
setDragMode([mode]) ドラッグピクチャモードを設定

イベント

ready レンダリング前の準備イベント (画像が読み込まれ、クロッパーインスタンスが準備されました)
cropstart、cropmove、cropend、crop startで切り抜き枠(またはキャンバス)を描画、途中で切り抜き枠(またはキャンバス)を描画、切り抜き枠(またはキャンバス)が終了、cropイベント event.detail.originalEvent、event.detail 。アクション
- autoCrop が true の場合、準備が整う前にクロップイベントがトリガーされます
ズームクロッピングボックスのスケーリングイベント

レンダリングの練習

図に示すように、指定した画像をトリミングすることができ、サイズ、縦横比などのインタラクティブなトリミングモードを選択できます.トリミングされた領域をプレビューすることもできます.トリミングを確認した後、キャンバスを生成できますトリミングされた画像を含むオブジェクトキャンバスの toDataURL メソッドを使用して、Base64 形式で画像を生成できます。キャンバスを使わない方法もあります. このツールの豊富な API を使用すると, 元の画像に対するトリミング領域のデータを取得できます. これらのデータを使用して CSS 絶対配置を実行し、トリミングされた画像を表示します. この方法では,画像は歪みがなく完全です。

キーコードの練習

vue フレームワークで小さなデモを作成しました. 使用方法は非常に簡単です. 重要なのは、このツールの豊富な機能を理解し、いつ使用するかを知ることです.

<template>
  <div class="hello">
    <p>预览</p>
    <div class="before"></div>
    <iy-button style="margin: 30px auto;" type="error" @click="sureSava">裁剪</iy-button>
    <div class="container">
      <div class="img-container">
        <img src="../assets/test.jpg" ref="image" alt=""> 
      </div>
      <div class="afterCropper">
        <img :src="afterImg" alt="">
      </div>
    </div>
  </div>
</template>

<script>
import Cropper from 'cropperjs'
import 'cropperjs/dist/cropper.css'

export default {
  name: 'HelloWorld',
  data () {
    return {
      myCropper: null,
      afterImg: ''
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    init(){
      this.myCropper = new Cropper(this.$refs.image, {
        viewMode: 1,
        dragMode: 'none',
        initialAspectRatio: 1,
        aspectRatio: 1,
        preview: '.before',
        background: false,
        autoCropArea: 0.6,
        zoomOnWheel: false,
      })
    },
    sureSava(){
      this.afterImg = this.myCropper.getCroppedCanvas({
        imageSmoothingQuality: 'high'
      }).toDataURL('image/jpeg')
    }
  },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.container{
  display: flex;
}
.before{
  width: 100px;
  height: 100px;
  overflow: hidden;
  /* 这个属性可以得到想要的效果 */
}
.img-container{
  height: 400px;
  overflow: hidden;
}
.afterCropper{
  flex: 1;
  margin-left: 20px;
  border: 1px solid salmon; 
  text-align: center;
}
.afterCropper img{
  width: 150px;
  margin-top: 30px;
}
</style>