blueimp-load-image【JSライブラリ1日1個】

JSライブラリを1日1つ紹介する

1日1つJSのライブラリを調べる、第2弾です。

① ライブラリに関するドキュメントを最初から最後まで読む

② 実際に使ってみる or 使い方を調べる

③ ライブラリを3行で説明する

本日は、blueimp-load-imageのドキュメントを読んで実際に業務で使っているところを調べました。

今日はVPofEとの1on1があったのですが、「概要を知っていないと要約はできないから、とてもいい取り組みだね」と言っていただけました。

JSの勉強になるだけでなく、人に説明する力も鍛えることができるのでこの取り組みを提案してくださった上司は天才です...!!

ドキュメント

今回読んだドキュメントはこちらです。

github.com

使い方

blueimp-load-imageを導入すると、loadImage関数が使えるようになります。

この関数にFileオブジェクトかBlobでオブジェクトを渡すと、
HTMLのimgタグを返してくれます！！（設定による）

document.getElementById("file-input").onchange = function(e) {
  loadImage(
    e.target.files[0],
    function(img) {
      document.body.appendChild(img);
    },
    { maxWidth: 600 } // Options
  );
};

また、loadImageオブジェクトのscale関数にimageを渡すことで、画像をリサイズすることもできます。

var scaledImage = loadImage.scale(
  img, // img or canvas element
  { maxWidth: 600 }
);

↑（余談です。ここではloadImageがオブジェクトっぽい書き方になっています。上の使い方ではloadImageって関数じゃないの？と思ったら、関数はオブジェクトでもあるそうです。JavaScript何もわからなくなりました。）

const a = {}
a.b = 1

 ↑ オブジェクト（a）には、プロパティ（b）を追加できます。

loadImageも、オブジェクトでありscaleというプロパティを追加しており、loadImageが関数としてもオブジェクトとしてもかける...のかな？ライブラリじゃないとあまりしない書き方だそうです。JavaScript何もわからないです本当にごめんなさい。

3行でまとめる

blueimp-load-imageを導入すると、

- FileもしくはBlobが渡されると画像をよしなに加工してくれる関数を使えるようになる

- loadImage.scale(img, {maxWidth: size})でリサイズしたり、画像を回転させたりできる

（今日は２行だけど許してください） 

フィードバック

- 弊社では、このライブラリはiOSからきたアップロード前の回転を直すために導入した。

- Exif（https://www.weblio.jp/content/Exif ）を変更するのはむずかしい。

- ライブラリをみるときは、その人が出している他のリポジトリものぞいてみると面白い

　https://github.com/blueimp/jQuery-File-Upload

- JSのObjectについては、MDNやjsprimerの説明がわかりやすいので読んでみる。

　https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Working_with_Objects

　https://jsprimer.net/basic/object/
　https://jsprimer.net/basic/prototype-object/

以上です！

今日は実はあまり時間が取れなくて駆け足な感じになってしまいましたが、明日も頑張ります！