Maggie - 画像アップロード前のチェックを簡単に実装 // MOONGIFT Archived

HTML5になって、ファイル選択した際にファイルの内容を取得したり、サイズや画像の種別をチェックしたりできるようになりました。しかしその実装については面倒というイメージがあります。そこで使ってみたいのがMaggieです。指定された画像ファイルを柔軟に扱えるようになります。

Maggieの使い方

使い方です。getInfoという関数を使います。

getInfo('#my-input', info => {
  const preview = document.getElementById('img-preview');

  preview.src = info.src;
});

infoという変数の内容は次のようになっています。

srcをそのまま画像のsrcプロパティに当てはめて使えたり、画像サイズ（width/height）も取れているので簡単にプログラムで処理ができます。maggieを使えばより簡単にユーザビリティの高い仕組みができあがるでしょう。

MaggieはJavaScript製のオープンソース・ソフトウェア（MIT License）です。