cropperjs
v1.6.2
JavaScript画像クロッパー。これは、V1.xのブランチです。V2.xのために、
v2ブランチをご覧ください。
dist/
├── cropper.css
├── cropper.min.css (compressed)
├── cropper.js (UMD)
├── cropper.min.js (UMD, compressed)
├── cropper.common.js (CommonJS, default)
└── cropper.esm.js (ES Module)
npm install cropperjsブラウザで：
< link href =" /path/to/cropper.css " rel =" stylesheet " >
< script src =" /path/to/cropper.js " > </ script >CDNJSは、CROPPER.JSのCSSとJavaScriptのCDNサポートを提供します。ここでリンクを見つけることができます。
new Cropper ( element [ , options ] )要素
HTMLImageElementまたはHTMLCanvasElementオプション（オプション）
Object <!-- Wrap the image or canvas element with a block element (container) -->
< div >
< img id =" image " src =" picture.jpg " >
</ div > /* Make sure the size of the image fits perfectly into the container */
img {
display : block;
/* This rule is very important, please don't ignore this */
max-width : 100 % ;
} // import 'cropperjs/dist/cropper.css';
import Cropper from 'cropperjs' ;
const image = document . getElementById ( 'image' ) ;
const cropper = new Cropper ( image , {
aspectRatio : 16 / 9 ,
crop ( event ) {
console . log ( event . detail . x ) ;
console . log ( event . detail . y ) ;
console . log ( event . detail . width ) ;
console . log ( event . detail . height ) ;
console . log ( event . detail . rotate ) ;
console . log ( event . detail . scaleX ) ;
console . log ( event . detail . scaleY ) ;
} ,
} ) ; ズームインまたはズームアウトした後、新しいエリアをトリミングする方法は？
マウスをダブルクリックして、作物モードに入るだけです。
エリアをトリミングした後に画像を移動する方法は？
マウスをダブルクリックして移動モードに入ります。
フリー比モードでアスペクト比を修正する方法は？
作物のサイズを変更するときは、
Shiftを保持してください。
自由比率モードで正方形の領域をトリミングする方法は？
画像でトリミングするときは、
Shiftを保持してください。
作物のサイズは、画像の親要素（ラッパー）のサイズから継承されるため、表示可能なブロック要素で画像を包むようにしてください。
モーダルでクロッパーを使用している場合は、モーダルが完全に表示された後、作物を初期化する必要があります。それ以外の場合は、正しい作物を手に入れることはありません。
出力されたトリミングされたデータは、元の画像サイズに基づいているため、画像を直接トリミングするためにそれらを使用できます。
クロスオリジン画像でクロッパーを起動しようとする場合は、ブラウザがHTML5 CORS Settings属性をサポートし、画像サーバーがAccess-Control-Allow-Originオプションをサポートしていることを確認してください（HTTPアクセスコントロール（CORS）を参照）。
既知のiOSリソース制限：iOSデバイスがメモリを制限するため、大きな画像をトリミングするときにブラウザがクラッシュする場合があります（iPhoneカメラの解像度）。これを回避するために、クロッパーを開始する前に、最初に画像をサイズ変更することができます（できれば1024ピクセル以下）。
既知の画像サイズの増加： HTMLCanvasElement.toDataURLメソッドを使用してブラウザ側にトリミングされた画像をエクスポートする場合、エクスポートされた画像のサイズは元の画像よりも大きくなる場合があります。これは、エクスポートされた画像のタイプが元の画像と同じではないためです。したがって、これを修正するために、 toDataURLの最初のパラメーターとして元の画像のタイプを渡すだけです。たとえば、元のタイプがjpegの場合、 cropper.getCroppedCanvas().toDataURL('image/jpeg')を使用して画像をエクスポートします。
topに戻ります
new Cropper(image, options)を使用して、クロッパーオプションを設定できます。グローバルデフォルトオプションを変更する場合は、 Cropper.setDefaults(options)を使用できます。
Number00 ：制限なし1 ：キャンバスのサイズを超えないように、作物箱を制限します。2 ：コンテナ内に収まるように最小キャンバスサイズを制限します。キャンバスと容器の割合が異なる場合、最小キャンバスは寸法の1つで余分なスペースに囲まれます。3 ：最小キャンバスのサイズを制限して、容器にぴったりとフィットします。キャンバスと容器の割合が異なる場合、コンテナは寸法の1つにキャンバス全体を取り付けることができません。クロッパーのビューモードを定義します。 viewModeを0に設定すると、作物箱はキャンバスの外側に伸びることがありますが、 1 、または3 2値は、作物箱をキャンバスのサイズに制限します。 2または3のviewModeは、キャンバスをコンテナにさらに制限します。キャンバスとコンテナの割合が同じである場合、 2と3間に違いはありません。
String'crop''crop' ：新しい作物箱を作成します'move' ：キャンバスを移動します'none' ：何もしません作物のドラッグモードを定義します。
NumberNaN作物の初期アスペクト比を定義します。デフォルトでは、キャンバスのアスペクト比（画像ラッパー）と同じです。
aspectRatioオプションがNaNに設定されている場合にのみ使用できます。
NumberNaN作物の固定アスペクト比を定義します。デフォルトでは、作物箱の自由比はあります。
Objectnull保存した以前のトリミングされたデータは、初期化されたときに自動的にsetDataメソッドに渡されます。
autoCropオプションがtrueに設定された場合にのみ利用可能です。
Element 、 Array （要素）、 NodeList 、またはString （セレクター）''プレビュー用に追加の要素（コンテナ）を追加します。
注：
aspectRatioオプションを設定する場合は、プレビューコンテナに同じアスペクト比を設定してください。overflow: hidden Styleをプレビューコンテナに設定します。Booleantrue窓をサイズ変更するときは、クロッパーを再レンダリングします。
Booleantrue窓のサイズを変更した後、クロップドエリアを復元します。
Booleantrue現在の画像がクロスオリジン画像であるかどうかを確認してください。
その場合、クローン化された画像要素にcrossOrigin属性が追加され、 src属性にタイムスタンプパラメーターが追加され、ソース画像をリロードしてブラウザキャッシュエラーを回避します。
画像要素にcrossOrigin属性を追加すると、画像URLにタイムスタンプの追加が停止し、画像のリロードが停止します。ただし、オリエンテーションチェックのために画像データを読み取るための要求（xmlhttprequest）には、ブラウザのキャッシュエラーを回避するためにキャッシュをバストするためのタイムスタンプが必要です。このリクエストをキャンセルするには、 checkOrientationオプションをfalseに設定できます。
画像のcrossOrigin属性の値が"use-credentials"の場合、XmlhttpRequestによって画像データを読み取ると、 withCredentials属性がtrueに設定されます。
Booleantrue現在の画像のEXIFオリエンテーション情報を確認してください。 JPEG画像のみがExifオリエンテーション情報を含めることができることに注意してください。
正確には、画像を回転または反転する方向値を読み取り、iOSデバイスのいくつかの問題（1、2）を回避するために、 1 （デフォルト値）で方向値をオーバーライドします。
rotatableオプションとscalableオプションの両方を同時にtrueに設定する必要があります。
注：一部のJPG画像には間違っている（標準以外の）方向の値がある可能性があるため、常にこれを信頼しないでください
タイプ付き配列サポート（すなわち10+）が必要です。
Booleantrue画像の上と作物箱の下に黒いモーダルを表示します。
Booleantrue作物の上に破線の線を表示します。
Booleantrue作物箱の上に中央のインジケーターを表示します。
Booleantrue作物の上に白いモーダルを表示します（作物箱を強調表示します）。
Booleantrueコンテナのグリッドの背景を表示します。
Booleantrue初期化されたときに画像を自動的にトリミングできます。
Number0.8 （画像の80％）0〜1の数である必要があります。自動作物のサイズ（パーセンテージ）を定義します。
Booleantrue画像を移動できるようにします。
Booleantrue画像を回転させることができます。
Booleantrue画像をスケーリングできるようにします。
Booleantrue画像をズームすることを有効にします。
Booleantrueタッチをドラッグして画像をズームすることを有効にします。
BooleantrueMouse Wheelingによって画像をズームすることができます。
Number0.1マウスホイーリングによって画像をズームするときにズーム比を定義します。
Booleantrueドラッグして、作物箱を移動できるようにします。
Booleantrueドラッグして、作物箱のサイズを変更できます。
Booleantrue作物で2回クリックすると、 "crop"と"move"の間のドラッグモードを切り替えることができます。
dblclickイベントサポートが必要です。
Number200コンテナの最小幅。
Number100コンテナの最小高さ。
Number0キャンバスの最小幅（画像ラッパー）。
Number0キャンバスの最小高さ（画像ラッパー）。
Number0作物の最小幅。
注：このサイズは、画像ではなくページに関連しています。
Number0作物の最小高さ。
注：このサイズは、画像ではなくページに関連しています。
Functionnull readyイベントへのショートカット。
Functionnull cropstartイベントへのショートカット。
Functionnull The cropmoveイベントへのショートカット。
Functionnull cropendイベントへのショートカット。
Functionnull cropイベントへの近道。
Functionnull zoomイベントへのショートカット。
topに戻ります
画像をロードするときに非同期プロセスがあるため、 setAspectRatioを除き、準備ができた後、ほとんどのメソッドを呼び出し、 replace destroy必要があります。
メソッドが値を返す必要がない場合、チェーン構成のcropperインスタンス（
this）を返します。
new Cropper ( image , {
ready ( ) {
// this.cropper[method](argument1, , argument2, ..., argumentN);
this . cropper . move ( 1 , - 1 ) ;
// Allows chain composition
this . cropper . move ( 1 , - 1 ) . rotate ( 45 ) . scale ( 1 , - 1 ) ;
} ,
} ) ;作物を手動で表示します。
new Cropper ( image , {
autoCrop : false ,
ready ( ) {
// Do something here
// ...
// And then
this . cropper . crop ( ) ;
} ,
} ) ;画像とクロップボックスを初期状態にリセットします。
作物を片付けます。
URL ：
StringHassamesize （オプション）：
Booleanfalse画像のSRCを交換し、クロッパーを再構築します。
クロッパーを有効にします（凍結解除）。
作物を無効（フリーズ）します。
クロッパーを破壊し、画像からインスタンスを削除します。
offsetx ：
NumberOffsety （オプション）：
NumberoffsetXです。キャンバス（画像ラッパー）を相対オフセットで移動します。
cropper . move ( 1 ) ;
cropper . move ( 1 , 0 ) ;
cropper . move ( 0 , - 1 ) ;X ：
Numberleft値Y （オプション）：
Numbertop値xです。キャンバス（画像ラッパー）を絶対ポイントに移動します。
Number相対比でキャンバス（画像ラッパー）をズームします。
cropper . zoom ( 0.1 ) ;
cropper . zoom ( - 0.1 ) ;比率：
Numberピボット（オプション）：
Object{ x: Number, y: Number }キャンバス（画像ラッパー）を絶対比にズームします。
cropper . zoomTo ( 1 ) ; // 1:1 (canvasData.width === canvasData.naturalWidth)
const containerData = cropper . getContainerData ( ) ;
// Zoom to 50% from the center of the container.
cropper . zoomTo ( .5 , {
x : containerData . width / 2 ,
y : containerData . height / 2 ,
} ) ;Number画像を相対的な程度に回転させます。
CSS3 2D変換サポート（つまり9+）が必要です。
cropper . rotate ( 90 ) ;
cropper . rotate ( - 90 ) ;Number画像を絶対的な程度まで回転させます。
Scalex ：
Number11に等しい場合、それは何もしません。Scaley （オプション）：
NumberscaleXです。画像をスケーリングします。
CSS3 2D変換サポート（つまり9+）が必要です。
cropper . scale ( - 1 ) ; // Flip both horizontal and vertical
cropper . scale ( - 1 , 1 ) ; // Flip horizontal
cropper . scale ( 1 , - 1 ) ; // Flip verticalNumber11に等しい場合、それは何もしません。画像のアブシッサをスケーリングします。
Number11に等しい場合、それは何もしません。画像の縦座標をスケーリングします。
丸い（オプション）：
Booleanfalsetrueを設定します。（返品値）：
Objectx ：クロップドエリアの左のオフセットy ：クロップドエリアのオフセット上部width ：クロップドエリアの幅height ：クロップドエリアの高さrotate ：画像の回転程度scaleX ：画像のアブシッサに適用するスケーリング係数scaleY ：画像の縦座標に適用するスケーリング係数最終的なトリミングされたエリアの位置とサイズデータを出力します（元の画像の自然なサイズに基づいて）。
データをサーバー側に送信して、画像を直接トリミングできます。
rotateプロパティで画像を回転させます。scaleXとscaleYプロパティで画像をスケーリングします。x、y、width、およびheight特性で画像をトリミングします。
ObjectgetDataメソッドを参照してください。クロップドエリアの位置とサイズを新しいデータで変更します（元の画像に基づいて）。
注：このメソッドは、
viewModeオプションの値が1以上の場合にのみ使用できます。
Objectwidth ：コンテナの電流幅height ：容器の現在の高さコンテナサイズのデータを出力します。
Objectleft ：画像の左のオフセットtop ：画像のオフセット上部width ：画像の幅height ：画像の高さnaturalWidth ：画像の自然幅naturalHeight ：画像の自然な高さaspectRatio ：画像のアスペクト比rotate ：回転した場合の画像の回転度scaleX ：スケーリングされた場合、画像のアブシッサに適用するスケーリング係数scaleY ：スケーリングされた場合、画像の縦座標に適用するスケーリング係数画像の位置、サイズ、およびその他の関連データを出力します。
Objectleft ：キャンバスの左のオフセットtop ：キャンバスのオフセット上部width ：キャンバスの幅height ：キャンバスの高さnaturalWidth ：キャンバスの自然幅（読み取り専用）naturalHeight ：キャンバスの自然な高さ（読み取り専用）キャンバス（画像ラッパー）の位置とサイズのデータを出力します。
const imageData = cropper . getImageData ( ) ;
const canvasData = cropper . getCanvasData ( ) ;
if ( imageData . rotate % 180 === 0 ) {
console . log ( canvasData . naturalWidth === imageData . naturalWidth ) ;
// > true
}Objectleft ：キャンバスの左に新しいオフセットtop ：キャンバスの新しいオフセット上部width ：キャンバスの新しい幅height ：キャンバスの新しい高さ新しいデータでキャンバス（画像ラッパー）の位置とサイズを変更します。
Objectleft ：作物の左のオフセットtop ：作物箱のオフセット上部width ：作物の幅height ：作物の高さ作物箱の位置とサイズのデータを出力します。
Objectleft ：作物の左の新しいオフセットtop ：作物箱の新しいオフセット上部width ：作物の新しい幅height ：作物の新しい高さ新しいデータで作物箱の位置とサイズを変更します。
オプション（オプション）：
Objectwidth ：出力キャンバスの宛先幅。height ：出力キャンバスの目的地の高さ。minWidth ：出力キャンバスの最小宛先幅、デフォルト値は0です。minHeight ：出力キャンバスの最小宛先高さ、デフォルト値は0です。maxWidth ：出力キャンバスの最大宛先幅、デフォルト値はInfinityです。maxHeight ：出力キャンバスの最大宛先高さ、デフォルト値はInfinityです。fillColor ：出力キャンバスのアルファ値を埋める色、デフォルト値はtransparentです。imageSmoothingEnabled ：画像が滑らかになっているtrue （デフォルト）かどうか（ false ）の場合に変更するように設定します。imageSmoothingQuality品質：「低」（デフォルト）、「中」、または「ハイ」の1つ、画像の品質を設定します。rounded ：丸い値（トリミングされた領域の位置とサイズのデータ）を使用するようにtrueを設定すると、デフォルト値はfalseです。（返品値）：
HTMLCanvasElement注：
fillColorオプションを設定する必要があります。そうでない場合は、JPEG画像の透明な部分がデフォルトで黒くなります。ブラウザのサポート：
トリミングされた画像（喪失した圧縮）から描かれたキャンバスを取得します。トリミングされていない場合は、画像全体を描いたキャンバスを返します。
その後、キャンバスを画像として直接表示するか、htmlcanvaselement.todataurlを使用してデータURLを取得するか、htmlcanvaselement.toblobを使用してBlobを取得し、ブラウザーがこれらのAPIをサポートする場合はFormDataのサーバーにアップロードします。
空白の（または黒い）出力画像を取得しないでください。キャンバス要素のサイズ制限のため、 maxWidthとmaxHeightプロパティを限られた数値に設定する必要がある場合があります。また、同じ理由で、最大ズーム比（ zoomイベントで）を制限する必要があります。
cropper . getCroppedCanvas ( ) ;
cropper . getCroppedCanvas ( {
width : 160 ,
height : 90 ,
} ) ;
cropper . getCroppedCanvas ( {
minWidth : 256 ,
minHeight : 256 ,
maxWidth : 4096 ,
maxHeight : 4096 ,
} ) ;
cropper . getCroppedCanvas ( {
fillColor : '#fff' ,
imageSmoothingEnabled : false ,
imageSmoothingQuality : 'high' ,
} ) ;
// Upload cropped image to server if the browser supports `HTMLCanvasElement.toBlob`.
// The default value for the second parameter of `toBlob` is 'image/png', change it if necessary.
cropper . getCroppedCanvas ( ) . toBlob ( ( blob ) => {
const formData = new FormData ( ) ;
// Pass the image file name as the third parameter if necessary.
formData . append ( 'croppedImage' , blob /*, 'example.png' */ ) ;
// Use `jQuery.ajax` method for example
$ . ajax ( '/path/to/upload' , {
method : 'POST' ,
data : formData ,
processData : false ,
contentType : false ,
success ( ) {
console . log ( 'Upload success' ) ;
} ,
error ( ) {
console . log ( 'Upload error' ) ;
} ,
} ) ;
} /*, 'image/png' */ ) ;Number作物のアスペクト比を変更します。
String'none''none' 、 'crop' 、 'move'ドラッグモードを変更します。
ヒント：クロッパーをダブルクリックして、「作物」と「移動」モードを切り替えることができます。
topに戻ります
このイベントは、ターゲット画像が読み込まれ、クロッパーインスタンスが動作する準備ができたときに発射されます。
let cropper ;
image . addEventListener ( 'ready' , function ( ) {
console . log ( this . cropper === cropper ) ;
// > true
} ) ;
cropper = new Cropper ( image ) ;event.detail.originalEvent ：
Eventpointerdown 、 touchstart 、およびmousedownevent.detail.action ：
String'crop' ：新しい作物箱を作成します'move' ：キャンバスを動かす（画像ラッパー）'zoom' ：タッチでキャンバス（画像ラッパー）をズームイン /アウトします。'e' ：クロップボックスの東側のサイズ'w' ：クロップボックスの西側をサイズ変更します's' ：クロップボックスの南側をサイズ変更します'n' ：クロップボックスの北側をサイズ変更します'se' ：クロップボックスの南東側をサイズ化する'sw' ：クロップ箱の南西側をサイズ変更します'ne' ：作物の北東側のサイズ'nw' ：作物の北西側をサイズ化します'all' ：クロップ箱を移動する（すべての方向）このイベントは、キャンバス（画像ラッパー）または作物箱が変化し始めたときに発砲します。
image . addEventListener ( 'cropstart' , ( event ) => {
console . log ( event . detail . originalEvent ) ;
console . log ( event . detail . action ) ;
} ) ;event.detail.originalEvent ：
Eventpointermove 、 touchmove 、およびmousemove 。event.detail.action ：「Cropstart」と同じです。
このイベントは、キャンバス（画像ラッパー）または作物箱が変化したときに発砲します。
event.detail.originalEvent ：
Eventpointerup 、 pointercancel 、 touchend 、 touchcancel 、 mouseup 。event.detail.action ：「Cropstart」と同じです。
このイベントは、キャンバス（画像ラッパー）または作物箱が変化を止めたときに発砲します。
これらのプロパティについては、
getDataメソッドを参照してください。
このイベントは、キャンバス（画像ラッパー）または作物箱が変更されると発生します。
注：
autoCropオプションがtrueに設定されると、 readyイベントの前にcropイベントがトリガーされます。dataオプションが設定されると、 readyイベントの前に別のcropイベントがトリガーされます。event.detail.originalEvent ：
Eventwheel 、 pointermove 、 touchmove 、およびmousemove 。event.detail.oldratio ：
Numberevent.detail.ratio ：
NumbercanvasData.width / canvasData.naturalWidth ）このイベントは、Canvas（画像ラッパー）をズームインまたはズームアウトし始めたときに発生します。
image . addEventListener ( 'zoom' , ( event ) => {
// Zoom in
if ( event . detail . ratio > event . detail . oldRatio ) {
event . preventDefault ( ) ; // Prevent zoom in
}
// Zoom out
// ...
} ) ;topに戻ります
同じ名前空間を持つ別のクロッパーを使用する必要がある場合は、 Cropper.noConflict staticメソッドを呼び出して戻してください。
< script src =" other-cropper.js " > </ script >
< script src =" cropper.js " > </ script >
< script >
Cropper . noConflict ( ) ;
// Code that uses other `Cropper` can follow here.
</ script > 貢献ガイドラインを読んでください。
セマンティックバージョンのガイドラインで維持されています。
MIT©Chen Fengyuan
topに戻ります
