細切れ画像をPNGにまとめる

このサービスでは虫眼鏡UIで拡大する際に10分割+4ピクセルの画像をPHP GDで生成していたので、ローカルにダウンロードした10分割のPNGファイルを一つのPNGファイルにまとめてブラウザで表示し、クリックするとダウンロードするJavaScriptを書きました。

呼び出すHTMLではBODY内にCANVASを記述しておきます。3行目がフォルダの名称、4行目がズレ幅、5行目は噂で聞いた縦長右方向のサービスがあると言うことで設けました(未確認汗) 縦長画像があって設置しました。

細切れ写真の用意は、Safariの開発→ページのリソースを表示からPNGを右クリック→写真に追加し、写真のフォルダ内で並び替えをしてから連番で書き出します。

電子書籍のデータ引き上げのプロセスと類似しています

ファイルを設定後、再読み込みで画像が表示され、クリックするとidの番号名のPNGファイルがダウンロードされます。

注意: この内容は写真を購入しないで済まそうとする悪意を助長するためのものでなく、あくまで技術的好奇心によるものです。

投稿者: hkitago

個人事業主でウェブと iOS, Android アプリの開発者で一児の父親。JavaScript, ActionScript, AppleScript, PHP, SQL, ObjC, Swift, Java の読書実行試験運用管理を生業とし、Bind, Postfix, Apache を MacOS で使い、エディタは Vi, mi, Kod, Smultron, TextWrangler を経て Coda, Xcode, Android Studio といった IDE と CotEditor を重用しています。