[Javascript] Canvasを使って大きい画像の縮小データをbase64で出力までをブラウザのみで行う方法

paint-1394387_1280
LINEで送る
Share on GREE
Share on LinkedIn

WEBサービス構築の際に特定の画像をブラウザ内に保持しておきたい事があります。
ユーザーアイコンや、任意の指定画像など、数Kb程度の画像であれば、base64形式にしてlocalStorageに保存しておくと便利です。

ただ、スマホでこうした作業を行う場合、サーバーに画像を送ってimageMagicで画像をリサイズしてブラウザでリクエストし直すという事が想像できますが、HTML5はこうした作業がブラウザ内の機能でできてしまいます。

そのやり方とサンプルソースコードを書いておきます。

Summery

  1. ”input type=file”でローカルPCやスマホに保存されている画像を読み込む。
  2. この段階でローカルファイルをブラウザに読み込む事ができます。
  3. 読み込んだ画像をcanvasに読み込み、特定サイズに縮小して表示。
  4. 縮小されて表示した画像をbase64形式として文字列で取得
  5. base64データをlocalStorageに保存する。

その後localStorageが読み込みできるページであれば、画像をURLで表示するのではなく、キャッシュから表示できるので、超高速に表示できる&ネットを介さないので、帯域の節約になる。

base64データはIMGタグのsrc属性にそのまま入れ込めば、ブラウザでは画像として表示されるので、扱いは楽だと思いますよ。

ソースコード

実行画像

スクリーンショット 2017-03-19 19.19.43

解説

canvasタグの取得

もし、canvasタグがない場合は、createしてください。

widthとheightを指定しているのは、これがないとcanvasはpixel値が設定されないようです。
cssのwidthとheightを記述しても、canvasの値は個別に保持していて、それぞれの値が違う場合、画像が等倍にならないようです。
ハマりポイントなので、要注意を!!

canvasのcontextの取得

ここまではお決まりの工程なので、毎回コピペでも良いぐらいです。

読み込んだ画像のセット

srcをセットすると、画像を読み込むのでonloadで読み込みタイミングをみはからって、読み込み後に各種処理を行います。

読み込んだ画像を正方形にする

ここの工程は、正方形に拘らなければ、もっと簡素に書いてください。

canvasのレンダリング情報をbase64で取得する

何の迷いもなく、base64が取得できます。
そのままsrcに入れると画像として利用できるのもポイントです。

ローカルストレージにキャッシュする

base64自体が文字列なので、そのままキャッシュデータに保存できます。
もしかするとエンコードが必要かもしれませんが、僕の環境(chrome)では、問題なく動いてます。

細かな画像がキャッシュして帯域もエコに利用するようにしましょう。

Leave a Reply

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です


*