画像切取り、crop のプレビュー

Webページ上で画像切取り crop を行う時のプレビュー

https://github.com/fengyuanchen/cropperjs
を元に jQuery 用の Cropper
https://github.com/fengyuanchen/jquery-cropper
これを使用した時の プレビューについて、
crop 実行のオプションで任意の場所に、プレビューで表示するのだが。。
f:id:posturan:20190111194133j:plain
HTML

<div class="target><img id="image" src="flower2.jpg" id="trimed_image" ></div>
<div class="img-preview"></div>

CSS

.target img{
  max-width: 100%;
}
.img-preview{
  overflow: hidden;
  height: 100px;
  width: 100px;
  border: 1px solid #000000;
}
.img-preview > img{
  max-width: 100%;
}

cropper.css
cropper.min.js
jquery-cropper.min.js

を使用して、jQuery は、cropper({}) で、previewを指定する。

$('#image').cropper({
     aspectRatio: 1 / 1,
     preview: '.img-preview'
}):

このように、class="img-preview" の部分にプレビューが表示されるが、
あくまでも、プレビューであり実際に切り取った画像イメージではない。
プレビュー部分で右クリック対象を画像保存すると、元の画像で保存される。
切り取ったイメージの画像を保存したければ、croppper()メソッドを実行させた結果から
canvas などに一度描画させて保存するしかない。

<canvas id="canvas"></canvas>

croppper()メソッドを実行

var x1 = 0;
var y1 = 0;
var width = 0;
var height = 0;
var result;

$('#image').cropper({
   aspectRatio: 1 / 1,
   preview: '.img-preview',
   crop: function(event){
      x1 = event.detail.x;
      y1 = event.detail.y;
      width = event.detail.width;
      height = event.detail.height;
   }
});

canvasへの書込み

var canvas = $('#canvas');
const canvasCtx = document.getElementById('canvas').getContext('2d');
canvasCtx.clearRect(0, 0, canvas.width(), canvas.height()); // 描画前にクリア
canvas.css('width', width );
canvas.css('height', height );
canvasCtx.drawImage(document.getElementById("image"), x1, y1, width, height, 0, 0, width, height);

でも、この canvasへの書込みは、ブラウザ表示では、height が2倍になってしまいます。
それに、canvas に、drawImage で描画しても小さくなってしまい役に立たない。
だから、cropper の preview 属性の指定で表示するプレビューは良いのだけど
切り取った画像ではないのが残念