画像トリミング機能実装その2

画像のトリミング機能実装

こんにちは！ウェブエンジニアのジワタネホです！

今日は久しぶりにフロントエンドっぽい記事を書こうと思います。

今日は画像トリミングに関して！

ユーザー登録などのフォームをリッチな仕様にするには持ってこいのはず！

長くなるので記事を3つに分けます。

本記事はその２記事目となります!

誰かの開発の参考になれば！！

画像トリミング機能実装その1

画像トリミング機能実装その3

要件定義

こちらの過去記事をご参考ください。

画像トリミング機能実装その1

デモ

http://zihuatanejo.jp/demoes/trimming.html

ちなみにコードは以下に置いてあります。トリミング以外もありますが悪しからず。

GitHub

実装の手順

• 必要なライブラリの実装 -過去記事でdone
• 静的部分のコーディング -過去記事でdone
• Bootstrapでモーダル実装 -過去記事でdone
• File API実装 - 本記事
• Cropper.jsでトリミング実装

File API実装

完成版コード

$(".js-imageFile").on("change", function(){
  selectImage();
});

function selectImage(){
  var file = document.getElementById('image-file').files[0];
  showFileName(file)
  var reader = new FileReader();
  reader.onload = function() {
    showFileImage(reader)
  }
  reader.readAsDataURL(file);
};

function showFileName(file){
  var fileName = file.name
  $(".js-fileName").text(fileName)
};

function showFileImage(reader){
  $(".js-previewImageBlock").css("border", "none")
  $('.js-preaviewImage').attr("src", reader.result);
  $(".js-trimmingAreaImg").attr("src", reader.result)
};

大まかなコードの解説

• イベント登録
• 選択されたファイルオブジェクトの読み込みと画像データの生成
• 選択されたファイルオブジェクトからファイルの名前を表示させる
• 生成した画像データを表示させる

大まかな流れとしてはこんな感じです。

次で細かく詳細を書きます。

イベント登録

まあここは当然input type="file"が変更されたらイベント発火で問題ないです。

$(".js-imageFile").on("change", function(){
  selectImage();
});

選択されたファイルオブジェクトの読み込みと画像データの生成

function selectImage(){
  //選択されたファイルのオブジェクト
  var file = document.getElementById('image-file').files[0];
  //選択されたファイルオブジェクトからファイル名を取得する
  showFileName(file)
  //画像データの生成
  var reader = new FileReader();
  reader.onload = function() {
    //画像の表示
    showFileImage(reader)
  }
  reader.readAsDataURL(file);
};

画像データの生成は、新たにnew FileReader()で空の画像オブジェクトを生成します。

さらにreader.readAsDataURL(file)で選択したファイルオブジェクトを画像オブジェクトとしてURLを格納します。

格納し終わったらそのURLを使って画像を表示させます。

選択されたファイルオブジェクトからファイルの名前を表示させる

これはこのまま。

選択されたファイルオブジェクトのファイル名は.nameで取れるはず。

function showFileName(file){
  var fileName = file.name
  $(".js-fileName").text(fileName)
};

生成した画像データを表示させる

ここもそのまま。

注意点としては、通常のプレビュー画像とは別に、トリミング用のモーダル内にも同じ画像をセットすること。

この時点ではモーダルの表示はされていませんが、表示されるタイミングよりもファイルを選択したタイミングでセットする方がベターかと。

function showFileImage(reader){
  $(".js-previewImageBlock").css("border", "none")
  $('.js-preaviewImage').attr("src", reader.result);
  //トリミング用にモーダル内にも画像をセット(まだ非表示)
  $(".js-trimmingAreaImg").attr("src", reader.result)
};

最後に

本日はここまで！

いかがだったでしょうか?

次回はいよいよCropper.jsを使ってトリミングしていきます！

乞うご期待！！