jimpとFileインターフェースの組み合わせについて

https://s8a.jp/javascript-image-processing-library-jimp

上記を参考にjimpを使って画像操作をしたいんですが、
jimpがBlobインターフェースを取り込む方法がわからなくて悩んでいます。

HTMLInputElementからFileを取得する動作は組めるんのですが
それをjimp.readにどう渡せば機能できますでしょうか？

行動規範の内容に同意します

回答1件

ベストアンサー

画像処理スクリプトJimpでは画像データをURL文字列として受け取ります. そのため, input[type=file]要素で入手した画像FileオブジェクトをJimpで処理する為には前もってURL文字列に変換する必要があります.

一般にFile(Blob)オブジェクトをURL文字列に変換する方法としては次の2つが考えられます.

FileReaderを用いる方法

FileReaderオブジェクトはFile(Blob)オブジェクトを(Base64エンコードされた)dataURIスキーム形式のURL文字列に変換します. 得られたURL文字列には元のデータが全て含まれているため, 外部とのデータの受け渡しを行う場合に有効です. 一方, バイナリデータを文字列に変換する過程で若干のコストが掛かります.

JavaScript
1//FileReaderを用いてFile(Blob)をdataURIスキームに変換する
2const fileReader = new FileReader();
3//File読み込み完了時の処理
4fileReader.onloadend = e => {
5  Jimp.read(fileReader.result).then(lenna => 
6    lenna.getBase64(Jimp.MIME_PNG, (err, src) => {
7      document.querySelector("#img").src = src;
8    })
9  );
10};
11document.querySelector("#file").onchange = e => {
12  const file = e.target.files[0];
13  if(!file){return;}
14  //FileをURLとして読み込む
15  fileReader.readAsDataURL(file);
16};

URL.createObjectURLを用いる方法

URL.createObjectURLメソッドはFile(Blob)オブジェクトをBlobURIスキーム形式のURL文字列に変換します. 得られたURL文字列は元となるFile(Blob)オブジェクトへの参照を含んでおり, そのページでのみ有効です. また, 不必要となった時点でURL.revokeObjectURLメソッドを用いてURL文字列を開放(つまりFileオブジェクトへの参照を破棄)する必要があります.

JavaScript
1document.querySelector("#file").onchange = e => {
2  const file = e.target.files[0];
3  if(!file){return;}
4  //Blobを読み込むためのURLを生成する
5  const url = URL.createObjectURL(file);
6  Jimp.read(url).then(lenna => 
7    lenna.getBase64(Jimp.MIME_PNG, (err, src) => {
8      document.querySelector("#img").src = src;
9      //不必要となったURLを開放する
10      URL.revokeObjectURL(url);
11    })
12  );
13};