固定サイズでの画像の切取り

Cropper JS使用の画像 crop で、常に固定サイズ
=常に一定の width と height
で切り取りするようにする。

切り取り BOX をリサイズ不可にするのは、
https://github.com/fengyuanchen/cropperjs#options
にあるとおり、cropBoxResizable オプションを false にする。
メソッドの説明により、
https://github.com/fengyuanchen/cropperjs#methods
setData メソッドで、crop セット(readyイベント)のタイミングで切り取り BOX の位置、サイズを
指定する。
切り取りBOXの再描画が行われるドラッグ時のモードを 'crop' ではなく、'move' にする。
setDragMode メソッド

以下のように cropper を設置することになる。

$('#image').cropper({
   aspectRatio: 1 / 1,
   cropBoxResizable: false,
   preview: '.img-preview',
   ready: function(e){
      $(this).cropper('setData', {
            x: 0, y:0, 
            width: 100, height: 100,
            rotate: 0, scaleX: 1, scaleY: 1
      });
      $(this).cropper('setDragMode', 'move');
   }
});

f:id:posturan:20190112133759j:plain