ブラウザで画像ファイルのリサイズ処理

2022年12月20日 修正
resize処理を書き換え。
・imgタグを生成するのをやめて、window.createImageBitmap関数に変更。
・OffScreenCanvasが使えるブラウザでは OffScreenCanvasを使用し、使えない場合は cavas要素を生成して使用するように変更。

2021年9月11日 修正
ソース中の冗長的な構文を修正。

2021年9月15日
つづき。Web Worker。

最近のお話。あくまでフィクションです💦 進行中案件の担当さんにある日相談を受ける。

画像をウェブサーバーにアップロードしたいけど、大きいサイズはリサイズしてサーバーに保存したいんだよねー
でも、外注先の人が・・・
『サーバーで画像縮小するんで負荷が大きいし、画像処理にGD使うからPHPのmemory_limitを上げてくれないと・・・』
って言われてるんです！サーバーは共用のレンタルサーバーでmemory_limitなんて変更してくれそうもないし・・・。
『memory_limitを仮に上げてもアクセスが重なるとサーバー落ちてしまうかもしれないけど、責任持てない』
とも言われます！

何か方法ない？

んー、アップロードする前に JavaScript でリサイズすればいいんじゃね？って単純に思ったわけですけど・・・
そんなことも分かんねー外注先使ってんのか・・・っていうのが一つ目。
つーか、重くなるのが分かってんならサーバーで処理させるな！ っていうのが2つ目

ってなわけで、サンプルコードを渡して「後は良きに計らえ」コース。
サンプルを作ってやれば、あとはなんとかしてくれるんじゃねーか？ つか、なんでこっちがサンプル作んなきゃいけないんだよ！！！
本来外注先のシステム制作会社がやるべき仕事だろーよ！
まぁ、怒ってもしょうがない。そのレベルの外注先しかやってくれるところないんだからしょうがない。
こうやってこのブログのネタにできるんなら、怪我の功名というやつです。（ん？使い方間違ってないか?)

本題です。要は ブラウザで画像をリサイズしてBlobオブジェクトとして取得できれば、あとは FormDataを作ってappend するなり、してやれば万事解決です。

ググればJavaScriptとCanvas APIを使ったコードがゴロゴロ転がってるので参考にしてこちらの用途に合うように手を加えていく。
画像リサイズ処理自体は Canvas API を使えば簡単にできるので、後は File オブジェクトを FileReader で読み込んで、リサイズ後に canvasオブジェクトの toBlobメソッドで Blobオブジェクトを取得してやればいい。

ややこしいのが、それらすべてが非同期で処理しなければならない事。Promiseを使って一連の画像処理をしてやれば、await構文で同期処理のように待つことができる。

再利用できるように モジュールとして書いた。
簡単に説明すると、リサイズが必要な画像のFileオブジェクトと短辺の最大サイズを引数にして、コールするとリサイズされた画像がblobオブジェクトとして resolve される。

当然ブラウザのバージョンに依存してしまうが・・・ゴチャゴチャ言われたら ターゲットのブラウザ用に Babel で変換しちまえばいいし💦

これを下記コードのように input[type=file]のonChangeイベントハンドラでゴニョゴニョしてサーバーにアップロードする。
僕は jQuery が大好きなので jQuery を使う。何度も言うけど、やっぱり document.querySelector(‘p’) とかタイプするより、$(‘p’) の方がラクなんだよね。

当然ながら Internet Explorer は全バージョンエラーになる。
chrome/firefox や safari でもバージョンによっては動かない。。。これじゃダメだ！って言われたら、最終手段 Babel のご登場(⌒∇⌒)

僕は下記のような .babelrc を書いて・・・

 >> browserify ./index.js --transform babelify | uglifyjs -c -m --output ./es5/bundle.min.js

とかやると、とりあえず IE11でもシンタックスエラーにはならないようになる。だけど、結局 FormData.appendメソッドでエラーになるけどね😫

まぁ、今更なんですが、Canvas APIではリサイズ処理だけじゃなく図形を描画したり、ピクセル単位で演算処理を行うことでいろんなことが可能なので、サーバーサイドで画像処理を行わず、余力のあるクライアント(フロントエンド)で前処理させてから・・・というのがイマドキのやり方なんだろうな、と思います。

Windows Explorerシェルで複数のファイルをプログラムに渡したい

ファイルの差分表示に WinMerge (日本語版) を使っていました。TortoiseSVNにも自動で設定してくれるし、重宝してました。

一方、ubuntuとかCentOSのbashシェル内で作業しているときは、vim のdiffモードを使うことも増えてきまして、どうせならWindowsのデスクトップで作業しているときも gVim でやろうかな、と思い立ち、Windowsのレジストリをいじって関連付けしようとしました。

具体的には↓のように・・・

まぁ、でもこれは失敗します。この方法で２つファイルを選択した状態で、右クリックして opendiff をクリックするとgvimが二つ起動してそれぞれ別のgvimで開いてしまいます。失敗。
※追記 2021年6月24日 official buildのvimだと GvimExt32/GvimExt64 というシェルエクステンションが既にバンドルされてるみたいすね・・・。僕は kaoriya vim しか使ってなかったので気づかなかった💦

で、じゃぁ、%2とか%* ってのをつけ足せばいいんじゃない？ って思うのですが、やってみれば分かりますが、失敗します。上記と同じように複数のgVimウィンドウが開きます。
どうやら標準で複数選択したファイルを同一のプログラムのインスタンスに渡すことはできないようです。

じゃあ、どうすればいいのか？というと、Explorerのシェルエクステンション(インプロセス COMサーバー)を書いてレジストリに登録する必要があります。(グーグル調べ)

ってことで、現実的に C++ で実装するのはヒジョーにメンドクサイ。探せばシェルエクステンション用のフレームワークみたいなものがあるとは思うのですが、今はC#をメインに使っているので、できるなら C# でできないか、調べたところ(グーグルで)、SharpShell という、C#のシェルエクステンション用のフレームワークがあるようです。

SharpShell
SharpShell makes it easy to create Windows Shell Extensions using the .NET Framework.

ショートカットメニュー用のシェルエクステンション作成とインストールはチュートリアルがあるので、この通りに進めていけば苦も無く作成できると思います。

チュートリアル(英語)

ただ、このチュートリアルはかなり古く2014年の時のものですが、基本的にはあまり変わっていません。
注意点は、SharpShellを nugetで入れる場合は、2021年2月現在最新のもの(2.7.2)を入れる場合、Server Manager などのツールも最新のものを使う必要があります。nugetで SharpShell Tools を入れると なぜか 2.2.0のものがインストールされてしまうので上記 githubサイトで配布されている 2.7.2 のものを使う方がいいと思います。

基本的には・・・Visual Studio 2019 Community を使用します。

  1. プロジェクトを .NET Framework のライブラリ(DLL)として作成。
  2. 「プロジェクト ⇒ nugetのパッケージ管理」で SharpShell をインストール
  3. チュートリアルで説明されているように、SharpContextMenu を継承したクラスを作成
  4. ショートカットメニューに必要な抽象メソッドを実装する(Visual Studio 2019のコード補完で自動的にスケルトンが出ると思います)
  5. プロジェクト・プロパティ⇒アプリケーション⇒アセンブリ情報 で「アセンブリをCOM参照可能にする」にチェック
  6. プロジェクト・プロパティ⇒署名⇒アセンブリに署名する(チェック)⇒新規作成 適当な名前をつける
  7. ビルド
  8. ServerManagerでビルドしたDLLファイルを読み込んで、Server⇒Install Server(x64) Register Server(x64) を順番に実行
  9. インストール＆登録する前にテストしたければ、Test Server In Test Shell をクリックするとテスト用のエクスプローラもどきが出てくるのでそこでテストできるようです。

まぁ、そんなこんなで、やりたいことはできました(^▽^)/

※ただ一点注意しないといけないのは、.NET Frameworkのようなマネージコードをインプロセスサーバーとしてエクスプローラのプロセス内で動作させるのは未だにいいのかどうか分からないって点です。マイクロソフトの中の人も良いと言ってる人もいれば、やらない方がいいっていう人もいるようです。 この辺りは SharpShell のドキュメントでも書かれています。2021年現在、実際のところどうなんなんでしょうかね・・・・？

ただ、ショートカットメニューをクリックしてプロセスをキックするだけならあまり問題ないのかな～と思ってます。

ずっと前にC++で書いたシェルエクステンションのソースコードが残っているのでC++で書こうと思えば書けるんですが・・・やっぱりオッサンはもう頭が硬くなってるので時間がかかるんですよねぇ。

書いたコードはこんだけ。便利なライブラリに多謝・多謝。

簡易ISOファイル作成コマンド

■2021年8月2日 追記

これの続きです。

自分用のツールの置き場、備忘録として記録しています😅

CDやDVDのメディアからISOファイルを作成するのは結構カンタンにできました。
これで殆どやりたいことはできたのですが、やっぱりディレクトリからISOファイルを作るにはどうするんだろう？？？ という素朴な考えがでてきまして・・・

————– 追記
これが 非Windows OSならば、mkisofs コマンド(genisoimage)をdnfなりaptなりのパッケージマネージャで入れれば解決するんだけど・・・いかんせん、Windowsはそういう便利なコマンドはありません。oscdimg という Windowsのインストールメディアを作成するツールを使えばできるそうです。実用性を重視する人は oscdimg を使うといいと思います😀
追記ここまで —–

ググるとこれもWindowsで標準機能でできるようで・・・具体的にはイメージマスタリングAPIとしてCD/DVD等のファイルシステム作成からメディアへの書き込みまでの機能がCOMサーバーとして提供されているようです。COMサーバーで実装ってことは、WSHやC#から簡単に使える・・・ってことです。

サンプルのコードはもうマイクロソフトのコミュニティーサイトに載ってましたので、これを適当にいじって、任意のディレクトリをISOファイルにビルドできるコードを書いてみました。一つ前に書いたDVDメディアからISOファイルを作るコードも統合してみました。

イメージマスタリングAPIは.NET Frameworkのクラスライブラリで提供されておらず、C#から使用するには、TLBIMPコマンドを使用してタイプライブラリからCLRアセンブリに変換し、コンパイルするときにこのアセンブリを参照しないといけません。Visual Studio のIDE環境を使用する場合はプロジェクトにIMAPI2FS.dllの参照を追加するだけでいいかもしれません。
僕みたいにコンソール画面でカチャカチャする場合は・・・

>> tlbimp c:\WINDOWS\System32\imapi2fs.dll

のようにすると、同名のアセンブリ(dllファイル)ができるので、ソースコードをコンパイルするときに、このDLLファイルを /r オプションで追加します。

殆どサンプルコードをコピペしただけなので、特に特筆するところはありません・・・githubにリポジトリ作ろうと思ったけど、ファイル1個だけなんでgistにした。

一応、タイプライブラリのインポートもあるので nmake用の makefileも書く。

DVDメディアのダンプ

Windows7の環境が必要になり開発用のプロダクトキー？を発行してもらい、後はHyperV環境で仮想マシンを作ってインストールするだけ。
って思ってたら、罠が・・・HyperVで稼働しているマシンにDVDを読めるドライブがねぇよ。。。
DVDメディアからISOファイルを作れば・・・と思い、Windows10のアクセサリの中にISOファイルを作るアプリを一応探してみたけど当然なく・・・、WindowsってISOファイルからメディアに焼く機能はエクスプローラから呼び出せるのに、その反対ができない・・・。

むむむ、linuxとかだと、ddコマンドで一発なのに・・・WSLからddでDVDドライブのデバイスを指定して・・・ってできないのかなぁ・・・。

仕方ないので窓の杜でフリーソフトを漁るか・・・とも思いましたが・・・、単にドライブをオープンしてダンプすればエエだけやろ？ ってことで、C#で書いた。C#からWindows APIをコールするところはマイクロソフトのサイトからコピペして、適当に。

要点は、Windows APIの CreateFile から返る SafeFileHandleをFileStreamに渡してバッファを介してコピーするだけ。
FileStream.CopyToAsyncメソッドを使えば一行で済むんだけど、やっぱり途中経過(進捗状況)は必要かなー、と思って無理やり FileStream.ReadAsync/WriteAsyncメソッドを使ったけど・・・。

tarよりzipコマンドをつけんかい!

どーでもいい記録です。

長年Windows標準のファイル圧縮・解凍ツールはCAB形式のファイルでした。今もそうですが・・・。そのため、cab形式のファイルを作成したり(makecab.exe)や解凍したり(expand.exe)するコマンドが標準であります。また、GUIシェルであるWindowsエクスプローラは標準でcab形式のファイルをフォルダとして扱えるようになってます。

・・・で、最近 ssh,curl,tarなど、従来では別途どこからか(cygwinやmsysなど)調達してこないといけないようなコマンドがWindows標準で使えるようになりました。特に tar コマンドは・・・それ、いる？？？？ って感じ。

tarコマンドを標準で揃えるぐらいなら、zipコマンドをつけんかい！ って思うのです。

Windowsって事実上の世界標準？であるzip形式のコマンドラインツールが付属していません。そうです、コマンドプロンプトでZIP書庫を解凍したり作ったりできないのです。しかし、GUIシェルであるエクスプローラはcabファイルと同じくzip書庫ファイルをフォルダとして扱えるようになってますが、そこまでするなら、なぜzipコマンドを付けないのか・・・ライセンスの問題なのか、何らかの制限があるのかわかりませんが、とっととzipコマンドをつけてほしい。

まぁ、文句を言っててもしょうがないので、代替方法。

■ PowerShellなら可能
コマンドプロンプトでは無理ゲーですが、PowerShellだとZIP形式のファイルを扱えます。

# 書庫展開
>> Expand-Archive -Path <書庫ファイルパス> -DestinationPath <解凍先パス>

# 圧縮
>> Compress-Archive -Path <圧縮するファイルパス(カンマで区切って複数指定可能、ワイルドカード認識)> -DestinationPath <書庫ファイルパス>

これを 利用してコマンドプロンプトから powershell -Command を実行します。

# sampleディレクトリをそのままzipファイルにします。
>> powershell -Command "Compress-Archive .\sample\ sample.zip"

めんどくさいですが、まぁライトユースには十分です。客先のWindowsデスクトップにリモートデスクトップで接続してデータファイルを圧縮してコピーとかやるとき、zipで固めてからコピーする時とか。好き勝手にツール類をインストールとか、フツーはできないよね？勝手にやったら怒られるわ、セキュリティーの警告が出るわで大変だからね・・・。Windows上でゴニョゴニョする時、できるだけ素のWindowsでできる方法を身に付けとかないと詰みますよね。

まぁ、単に圧縮するだけなら、標準のmakecabの方が便利だけど。分割圧縮書庫にもできるし。メールで1MB制限とかチョーめんどくさい環境でも分割してメールで送れるしね。でも cabファイルって結局Windowsアプリの配布にしか使われなかったよねぇ。まぁマイクロソフト・アレルギーで毛嫌いしてる人多いからねぇ。