Cropper.js で画像を切り出してCanvasに描画するサンプル

2020/03/07

記事のタイトル画像

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>

  このエントリーをはてなブックマークに追加    

<<「Web 開発」の記事一覧に戻る

関連記事