私は、プロジェクトのモバイル終わりをVUEを使用しています。
公式ウェブサイトのアドレス：cropperjs
GitHubの住所：https://github.com/fengyuanchen/cropperjs/blob/master/README.md
レンダリング、または魅力のないああを見てください！！母
ここでのみ達成するために、いくつかのパラメータを変更する方法として、あなたは公式サイトのAPIの理解に行き、メソッドを使用して記録。
まず、聞かせてのは、EXIF-jsからcropperjsをインストールNPMインストール
ストレージcropperjsはメソッドを処理し、画像ファイルを新規作成します（私は次のclipper.js静的ファイル内のファイルを置きます）
「cropperjs」からクロッパーをインポート
'EXIF-JS' からの輸入のExif
輸出のデフォルト{
インストール（ヴュ）{
// Initializeメソッド
Vue.prototype.initilize =関数（OPT）{
自己がこの=ましょう。
this.options = OPT。
// DOMを作成します。
this.createElement（）;
this.resultObj = opt.resultObj。
//初期化切断オブジェクト
this.cropper =新しいクロッパー（this.preview、{
アスペクト比：opt.aspectRatio || 1、
autoCropArea：opt.autoCropArea || 0.8、
ビューモード：1、
ガイド：opt.aspectRatio == '無料'？真偽 、
cropBoxResizable：opt.aspectRatio == '無料'？真偽 、
cropBoxMovable：opt.aspectRatio == '無料'？真偽 、
dragCrop：opt.aspectRatio == '無料'？真偽 、
背景：偽、
checkOrientation：真、
checkCrossOrigin：真、
ズーム可能：偽、
zoomOnWheel：偽、
センター：偽、
toggleDragModeOnDblclick：偽、
レディ：関数（）{
//にconsole.log（self.cropper.rotate（90））
もし（opt.aspectRatio == '自由'）{
クロップボックス= self.cropper.cropBoxをしましょう。
cropBox.querySelector（ 'span.cropperビューボックス'）style.outline = 'なし'。
self.cropper.disable（）;
}
}
}）;
}
画像切り出しのために、必要なDOMを作成します//
Vue.prototype.createElement =関数（）{
//空のオブジェクトのために絵を初期化
this.preview = NULL;
STR =「の<div> <IMGのid = "clip_image" SRC = "originUrl"> </ div> <ボタンタイプ= "ボタン" ID = "cancel_clip">取消</ button>の<ボタンタイプ= "ボタン" IDましょう= "clip_button">确定</ボタン> ';
STR + =「<DIV CLASS = "crop_loading"> <DIV CLASS = "crop_content"> <IMG SRC = "../静的/ loading.gif "> <DIV CLASS =" crop_text">图片上传中</ DIV> < / DIV> </ div> ';
STR + = '<DIV CLASS = "crop_success"> <DIV CLASS = "crop_success_text">上传成功</ div> </ div> </ div>';
せ、本体= document.getElementsByTagName（ 'ボディ'）[0];
this.reagion =のdocument.createElement（ 'DIV'）;
this.reagion.id = 'clip_container';
this.reagion.className = 'コンテナ';
this.reagion.innerHTML = STR。
//作成されたDOM要素を追加
body.appendChild（this.reagion）。
this.preview =のdocument.getElementById（ 'clip_image'）。
//バインド方法
this.initFunction（）;
}
//バインドされ、いくつかの機能を初期化します
Vue.prototype.initFunction =関数（）{
自己がこの=ましょう。
this.clickBtn =のdocument.getElementById（ 'clip_button'）。
this.cancelBtn =のdocument.getElementById（ 'cancel_clip'）。
//イベントを決定
this.addEvent（this.clickBtn、 'クリック'、機能（）{
self.crop（）;
}）
//イベントをキャンセル
this.addEvent（this.cancelBtn、 'クリック'、機能（）{
self.destoried（）;
}）
//クリア入力値
this.addEvent（this.fileObj、 'クリック'、機能（）{
this.value = '';
}）
}
オブジェクト変更の際に入力を呼び出すための//外部インターフェイス[「ファイル」]
Vue.prototype.clip =関数（E、OPT）{
自己がこの=ましょう。
this.fileObj = e.srcElement。
ファイル= e.target.filesましょう|| e.dataTransfer.files;
（！files.length）戻りfalseの場合; //画像を直接返しません
//初期化メソッドが呼び出されます
this.initilize（OPT）。
//画像ファイルのリソースを取得します。
this.picValue =ファイル[0];
写真を撮るとき、//情報を取得するには、写真が問題を解決するために回転させて
// Exif.getData（ファイル[0]、関数（）{
// self.Orientation = Exif.getTag（ファイル[0]、 '方向'）;
//にconsole.log（self.Orientation）
//}）。
// URL形式にメソッドターンを呼び出します
this.originUrl = this.getObjectURL（this.picValue）。
//新しいURLを取得する各画像を置き換えます
IF（this.cropper）{
this.cropper.replace（this.originUrl）。
}
}
//画像トランスコーディング方法
Vue.prototype.getObjectURL =関数（ファイル）{
URL = nullをしましょう。
（window.createObjectURL！=未定義）{//基本的な場合
URL = window.createObjectURL（ファイル）;
それ以外の場合}（window.URLは！=未定義）{//モジラ（Firefoxの）
URL = window.URL.createObjectURL（ファイル）;
}他（window.webkitURL！=未定義）の場合{// WebKitのか、クロム
URL = window.webkitURL.createObjectURL（ファイル）;
}
URLを返します。
}
//作物にOKをクリックします
Vue.prototype.crop =関数（）{
自己がこの=ましょう。
画像=新しいイメージを聞かせて（）;
croppedCanvasをしましょう。
roundedCanvasをしましょう。
//クロップ
document.querySelector（ 'crop_loading。'）style.display = 'ブロック'。
setTimeout（関数（）{
croppedCanvas = self.cropper.getCroppedCanvas（）。
// 円形
roundedCanvas = self.getRoundedCanvas（croppedCanvas）。
）（imgData = roundedCanvas.toDataURLてみましょう。
image.src = imgData。
//画像は、100Kよりも大きい場合、直接アップロード、圧縮、およびその逆以下であるか否かを決定します
IF（×1024 imgData.length <（100））{
self.resultObj.src = imgData。
//画像のアップロード
self.postImg（imgData）。
}他{
image.onload =関数（）{
//圧縮処理
データ= self.compress（画像、self.Orientation）とします。
self.resultObj.srcは、データを=。
//画像のアップロード
self.postImg（データ）。
}
}
}、20）
}
作物の画像リソースを取得します//
Vue.prototype.getRoundedCanvas =関数（sourceCanvas）{
キャンバス=のdocument.createElement（「キャンバス」）しましょう。
せコンテキスト= canvas.getContext（ '2D'）;
幅= sourceCanvas.widthてみましょう。
高さ= sourceCanvas.heightてみましょう。
canvas.width =幅;
canvas.height =高さ;
context.imageSmoothingEnabled =はtrue。
context.drawImage（sourceCanvas、0、0、幅、高さ）。
context.globalCompositeOperation =「宛先イン」;
context.beginPath（）;
context.rect（0、0、幅、高さ）。
context.fill（）;
キャンバスを返します。
}
//元のオブジェクトを破壊します
Vue.prototype.destoried =関数（）{
自己がこの=ましょう。
//削除イベント
this.removeEvent（this.clickBtn、 'クリック' は、null）;
this.removeEvent（this.cancelBtn、 'クリック' は、null）;
this.removeEvent（this.fileObj、 'クリック' は、null）;
//クロップフレームを削除
this.reagion.parentNode.removeChild（this.reagion）。
//オブジェクトのトリミングを破壊します
this.cropper.destroy（）;
this.cropper = NULL;
}
//画像のアップロード
Vue.prototype.postImg =関数（画像データ）{
//画像をアップロードするためにここに書きます
自己がこの=ましょう。
self.destoried（）;
window.setTimeoutは（関数（）{
document.querySelector（ 'crop_loading。'）style.display = 'なし'。
document.querySelector（」crop_success。）style.display = 'ブロック'。
オブジェクトを破壊した後//カット
self.destoried（）;
}、3000）
}
//画像の回転
Vue.prototype.rotateImg =関数（IMG、方向、キャンバス）{
//最小および最大の回転方向、原画像回転方向と第バック
CONST min_step = 0。
CONST max_step = 3。
（IMG == null）の復帰であれば、
// IMGの高さと幅は、img要素の隠蔽後に得ることができない、またはエラーが発生します
高さ= img.heightてみましょう。
幅= img.widthてみましょう。
ステップ= 2ましょう。
IF（ステップ== NULL）{
ステップ= min_step。
}
IF（方向== '右'）{
ステップ++;
//元の位置に回転、すなわち、最大値を超え
ステップ> max_step &&（ステップ= min_step）。
}他{
step--;
ステップ<min_step &&（ステップ= max_step）。
}
ラジアンで//回転角度パラメータ値
* 90 *にMath.PI / 180度=ステップを聞かせて、
CTX = canvas.getContext（ '2D'）とします。
スイッチ（ステップ）{
ケース0：
canvas.width =幅;
canvas.height =高さ;
ctx.drawImage（IMG、0、0）;
ブレーク;
ケース1：
canvas.width =高さ;
canvas.height =幅;
ctx.rotate（度）。
ctx.drawImage（IMG、0、-height）。
ブレーク;
ケース2：
canvas.width =幅;
canvas.height =高さ;
ctx.rotate（度）。
ctx.drawImage（IMG、-width、-height）。
ブレーク;
ケース3：
canvas.width =高さ;
canvas.height =幅;
ctx.rotate（度）。
ctx.drawImage（IMG、-width、0）;
ブレーク;
}
}
//画像圧縮
Vue.prototype.compress =関数（IMG、オリエンテーション）{
キャンバス=のdocument.createElement（「キャンバス」）しましょう。
CTX = canvas.getContext（ '2D'）とします。
//タイルキャンバス
TCanvas =のdocument.createElement（ "キャンバス"）しましょう。
（ "2D"）のTCtx = tCanvas.getContextましょう。
INITSIZE = img.src.lengthてみましょう。
幅= img.widthてみましょう。
高さ= img.heightてみましょう。
画像は、4つのメガピクセルよりも大きい場合、// 400百万以下に圧縮比と圧力の大きさを計算します
比率を聞かせて。
IF（（比=幅*高さ/ 4000000）> 1）{
console.log（「400万個の画素より大きい」）
比= Math.sqrt（比）
幅/ =比。
高さ/ =比。
}他{
比= 1。
}
canvas.width =幅;
canvas.height =高さ;
//色の寝具
ctx.fillStyleは "#FFFを" =;
ctx.fillRect（0、0、canvas.width、canvas.height）。
//画像がタイルのドローを使用して100万個のピクセルよりも大きい場合
数えてみましょう。
IF（（カウント=幅*高さ/ 1000000）> 1）{
カウント= ~~（Math.sqrt（回数）+ 1）; //計算どのように多くのブロックがタイルに分割されます
//計算各タイルの幅と高さ
NW = ~~（幅/数）しましょう。
NH = ~~（高さ/数）しましょう。
tCanvas.width = NW;
tCanvas.height = NH;
{（I ++;;私は<カウントI = 0ましょう）について
以下のために（聞かせてJ = 0; jの<数; J ++）{
tctx.drawImage（IMG、I * NW *比、J *、NH *比、NW *比、NH *比、0、0、NW、NH）。
ctx.drawImage（するTCanvas、I * NW、J * NH、NW、NH）;
}
}
}他{
ctx.drawImage（IMG、0、0、幅、高さ）。
}
写真をアップロードする//修理IOS時間が回転している問題
（オリエンテーション！= "" &&オリエンテーション！= 1）の場合{
スイッチ（配向）{
ケース6：//必要時計回り（左）90度回転
this.rotateImg（IMGは、キャンバス、 '左'）。
ブレーク;
ケース8：//必要性を反時計回り（右）90度回転
this.rotateImg（IMG、 '右'、キャンバス）;
ブレーク;
ケース3：// 180度の回転が必要
this.rotateImg（IMG、 '正しい'、キャンバスは）; //二回回し
this.rotateImg（IMG、 '右'、キャンバス）;
ブレーク;
}
}
//最小限の圧縮
Iはcanvas.toDataURL（ "画像/ JPEG"、0.1）=ましょう。
console.log（ '圧縮前：' + INITSIZE）。
console.log（ '圧縮：' + ndata.length）。
console.log（「压缩率： "~~ +（100 *（nitSize I - ndata.length）/ I nitSize）+" ％「）;
tCanvas.width = tCanvas.height = canvas.width = canvas.height = 0。
NDATAリターン;
}
//イベントを追加
Vue.prototype.addEvent =関数（OBJ、タイプ、FN）{
IF（obj.addEventListener）{
obj.addEventListener（タイプ、FN、偽）;
}他{
（+型、FN 'に'）obj.attachEvent。
}
}
//削除イベント
Vue.prototype.removeEvent =関数（OBJ、タイプ、FN）{
IF（obj.removeEventListener）{
obj.removeEventListener（タイプ、FN、偽）;
}他{
（+型、FN 'に'）obj.detachEvent。
}
}
}
}
メイン文書導入クリッパーで、コールVUE、使用（クリッパー）メソッド
`import`コマンドでロードする// Vueのビルドバージョン //（実行時のみ、またはスタンドアロン）の別名を持つwebpack.base.confに設定されています。 「表示」からインポートビュー 「./App」からの輸入のApp 「./router」からインポートルータ 「../static/clipper」からインポートクリッパー Vue.config.productionTip =偽 Vue.use（クリッパー） / * eslintディセーブル無新しいです* / 新しいビュー（{ 「#app」 ルータ、 テンプレート： ' < アプリケーション/> '、 成分：{アプリケーション} }）
メソッドは、呼び出しコンポーネントをclipper.js
<テンプレート>
<DIV CLASS = "こんにちは">
<IMG SRC = "./資産/ upload.png" ALT = "" ID = "IMG">
<input type = "ファイル" 受け入れる= "画像/ JPEG、画像/ PNG形式、画像/ JPEG" = "変更（$イベント）" の変化@>
</ div>
</テンプレート>
<スクリプト>
輸出のデフォルト{
データ（）{
リターン{
}
}、
方法：{
変更（イベント）{
画像=のdocument.getElementById（ 'IMG'）とします。
this.clip（イベント、{
でresultObj：画像、
アスペクト比：1、
}）
}
}
}
</ SCRIPT>
おめでとうは成功し、一度コードを運びます！！！
クリッパー