ブラウザで簡単画像リサイズ！Jimpライブラリの活用ガイド

JimpをWebアプリケーションで使用するための手順をまとめます。Jimpは純粋なJavaScriptで書かれた画像処理ライブラリで、Node.js環境だけでなくブラウザ環境でも使用できます。以下の手順では、ウェブページで画像をアップロードし、Jimpを使って画像を処理し、最終的な結果を表示する一連の流れを説明します。

1. Jimpのブラウザ版を読み込む

ウェブページにJimpのブラウザ版を読み込みます。CDNを介して簡単に追加できます。

<script src="https://cdn.jsdelivr.net/npm/jimp/browser/lib/jimp.min.js"></script>

2. 画像アップロードのためのHTMLを準備する

ユーザーが画像をアップロードできるように、<input type="file">タグを含むHTMLを用意します。

<input type="file" id="image-input" accept="image/*">
<img id="output-image" style="max-width: 100%; height: auto;">

3. 画像アップロードのイベントハンドラを設定する

JavaScriptを使用して、画像ファイルのアップロードイベントを処理するイベントハンドラを設定します。

document.getElementById('image-input').addEventListener('change', function (e) {
    if (e.target.files && e.target.files[0]) {
        const file = e.target.files[0];

        Jimp.read(URL.createObjectURL(file))
            .then(image => {
                // ここで画像の処理を行う
            })
            .catch(err => {
                console.error(err);
            });
    }
});

4. Jimpを使用して画像を処理する

画像をリサイズ、圧縮、色調整など、必要な処理を行います。

Jimp.read(URL.createObjectURL(file))
    .then(image => {
        // 例: 画像をリサイズし、品質を80%に設定
        image.resize(1024, Jimp.AUTO)
             .quality(80)
             .getBase64(Jimp.AUTO, (err, src) => {
                 if (err) throw err;
                 document.getElementById('output-image').src = src;
             });
    })
    .catch(err => {
        console.error(err);
    });

5. 処理した画像を表示する

画像処理が完了したら、結果をウェブページに表示します。上記の例では、getBase64メソッドを使用して画像をBase64エンコードし、<img>タグのsrc属性に設定しています。

GitHubリンク

Jimpの詳細や追加情報については、GitHubの公式リポジトリを参照してください:

Jimp on GitHub

JimpのGitHubページには、APIドキュメント、使用例、コントリビューションガイドラインなどが含まれています。また、問題が発生した場合のサポートや、コミュニティによる議論もここで行われています。