Webページ上で画像切取り crop を行う時のプレビュー
https://github.com/fengyuanchen/cropperjs
を元に jQuery 用の Cropper
https://github.com/fengyuanchen/jquery-cropper
これを使用した時の プレビューについて、
crop 実行のオプションで任意の場所に、プレビューで表示するのだが。。
HTML
<div class="target><img id="image" src="flower2.jpg" id="trimed_image" ></div> <div class="img-preview"></div>
.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 属性の指定で表示するプレビューは良いのだけど
切り取った画像ではないのが残念