HTML5のcanvasを用いた bitmap⇒jpegの圧縮変換方法 (サイズそのままに、base64で取得)

HTML5のcanvasを使って
bitmapデータをjpegデータ圧縮して
画像サイズ（画素数）はそのままに、
容量削減できるのを最近になって知った。

経緯

ドラッグドロップされた画像をページに表示したいとか、
サーバーにアップロードしてページリロード後に再表示したいとか、
そういった類の要求をアプリケーションの機能として実現する必要性がありまして。

レントゲンの白黒写真とか、そういったモノクロ画像や
内視鏡のカラー画像とか、それはそれは多種多様な画像を表示したいという要望がありまして。
(撮影画像を読影して診断を記録するためのシステムでは求められることが多い機能です。)

ある日、
「Webページの表示、データの保存操作が遅い」とか
「たまに保存が失敗する（IEのメモリ増加：別記事予定）」とか
いろいろエンドユーザーから不具合(?)のお問い合わせを頂きまして。

それでなんじゃろかと調べてみた、というのが始まりです。

貼り付けられた画像はー、えーと、
「拡張子は…jpegっと。（最近eありのjpegってあんまり見ない気がするなぁ）」
「ファイルサイズは6MB（んんん？ちょっと大きめか？他の案件だと150KBとかなのに、なんか妙だぞ）」
「これほんとにjpegか？」（binエディタで開いてみる）
「なになに、BMB…ってこれbitmapじゃないすか！やだーー！」
…という前置きはさておき。

というわけで既にありふれている情報かもしれませんが個人的な備忘録も兼ねまして。

サンプルコード

canvas_to_PNG.js

// もともとのソースではこう。
// toDataURLメソッドの第一引数が未指定。
// これだとpng形式になってしまうので、色数の多い画像データとかあまり圧縮率がよろしくない。
var base64 = canvas.toDataURL();

canvas_to_JPG.js

// 変更後のソースがこう。
// toDataURLメソッドの第一引数に 'image/jpeg' を指定する。これでjpeg形式に圧縮されるので
// 6MB程のカラー画像データも200KB程まで小さくなります(すべてが該当するとは限りません)。
// 特に、主に白黒(と白黒近似のRGB)で表現される画像は効果抜群。
// 黒背景と境界があいまいな肺画像なんかはjpegデータ化は適しているかと。
// ピクセル数は変更ないので、ジャギーもそれほど怖くない！
// toDataURLメソッドの第二引数を指定して品質(0.1~1.0)の変更もできます。
var base64 = canvas.toDataURL('image/jpeg');

※詳しくは HTMLCanvasElement.toDataURL() 参照

雑感

今までは.NET周りのデスクトップアプリケーションメインで開発が多かったですが、
さすがにWeb系の技術を仕事でも使うとなったらこういう細かい問題もノウハウとして蓄積しないといけないですね。

※こんな風に問題を調べて解決案（という名のある種の妥協案）を見つけたときが一番楽しいし爽快なんです。
※※Qiita初投稿のため、お作法がよくわかっていないことがあるかと思いますので、お手柔らかにお願いします。