Cropper.js を使って読み込んだ画像の範囲を切り取ってCanvasに表示する小さめなサンプルを作ったので載せておきます。元々スマホ画像をクロップしたかったので、縦横比 16:9 でクロップするサンプルになってます。
| 元画像 | クロップ後の画像 |
|---|---|
以下がソースコードです。CDN版なのでそのままコピペで動くかと思います。
<link rel="stylesheet" type="text/css" media="all"
href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.6/cropper.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.6/cropper.js"></script>
<input type="file" id="uploader">
<div>
<table>
<tr>
<th>元画像</th>
<th>クロップ後の画像</th>
</tr>
<tr>
<td><canvas id="sourceCanvas" width="1" height="1"></canvas></td>
<td><canvas id="croppedCanvas" width="1" height="1"></canvas></td>
</tr>
</table>
</div>
<script>
let cropper = null;
const cropAspectRatio = 9.0 / 16.0;
const scaledWidth = 200;
const cropImage = function (evt) {
const files = evt.target.files;
if (files.length == 0) {
return;
}
let file = files[0];
let image = new Image();
let reader = new FileReader();
reader.onload = function (evt) {
image.onload = function () {
let scale = scaledWidth / image.width;
let imageData = null;
{
const canvas = document.getElementById("sourceCanvas");
{
let ctx = canvas.getContext("2d");
canvas.width = image.width * scale;
canvas.height = image.height * scale;
ctx.drawImage(image, 0, 0, image.width, image.height, 0, 0, canvas.width, canvas.height);
}
if (cropper != null) {
// 画像を再読み込みした場合は破棄が必要
cropper.destroy();
}
cropper = new Cropper(canvas, {
aspectRatio: cropAspectRatio,
movable: false,
scalable: false,
zoomable: false,
data: {
width: canvas.width,
height: canvas.width * cropAspectRatio
},
crop: function (event) {
const croppedCanvas = document.getElementById("croppedCanvas");
{
let ctx = croppedCanvas.getContext("2d");
let croppedImageWidth = image.height * cropAspectRatio;
croppedCanvas.width = image.width;
croppedCanvas.height = image.height;
croppedCanvas.width = croppedImageWidth * scale;
croppedCanvas.height = image.height * scale;
ctx.drawImage(image,
event.detail.x / scale, event.detail.y / scale, event.detail.width / scale, event.detail.height / scale,
0, 0, croppedCanvas.width, croppedCanvas.height
);
}
}
});
}
}
image.src = evt.target.result;
}
reader.readAsDataURL(file);
}
const uploader = document.getElementById('uploader');
uploader.addEventListener('change', cropImage);
</script>
