今回のネタも前回と同じく画像をHTMLのTableタグに変換するスクリプトです。が、今回はAdobe製品の中で、もっともピクセル処理がやりやすいBridgeを使います。JavaScriptだとPhotoshopよりも高速で便利で、いろいろできます。
Photoshopよりピクセル処理が得意というのは不思議ですが・・・。
Bridgeの場合はnew BitmapData()に選択した画像ファイルオブジェクトを指定するだけで、後は前回のスクリプトと変わりません。ただし、Bridgeでは文字列の連結(text+="abc"等)が異常に遅いのでsaveFile.write()を使って1行ごとファイルに直接書き出しています。ちなみに文字数にもよりますが、文字列で連結した後で書き出すよりも10倍では済まないほどの速度差があります。つまり、ファイルに書いた方が文字列連結で最後に書き出すよりも10倍から100倍近く高速だという事です。もし、Bridgeで文字列処理を行うようなスクリプトを作成する場合には、実行速度の差には注意する必要があります(扱う文字数が少ない場合には高速みたいです)。
// Bridgeで開いた画像をtableタグに変換
function pixelToTable(){
for (var y=0; y<docObj.height; y++) {
saveFile.write('<tr>');
$.writeln(y);
for (var x=0; x<docObj.width; x++){
var rgb = new Color(docObj.getPixel(x,y));
var R = rgb.red.toString(16);
var G = rgb.green.toString(16);
var B = rgb.blue.toString(16);
if (R.length < 2){ R = "0" + R; }
if (G.length < 2){ G = "0" + G; }
if (B.length < 2){ B = "0" + B; }
saveFile.write('<td style="background-color:#'+R+G+B+'"></td>');
}
saveFile.write('</tr>');
}
}
// 保存ファイル選択
var saveFile, docObj;
(function(){
var imgFile = File.openDialog("変換する画像ファイルを選択してください");
if (!imgFile){ return; }
docObj = new BitmapData(imgFile);
saveFile = File.saveDialog("保存するHTMLファイル名を入力してください");
if (!saveFile) { return; }
var flag = saveFile.open("w");
if (!flag){ alert("ファイルが開けません"); }
var s = (new Date()).getTime();
saveFile.write('<!DOCTYPE html><head><title>pixeltable</title></head><body>');
saveFile.write('<table style="border:0px solid black;border-collapse: collapse;">');
pixelToTable();
var e = (new Date()).getTime();
var time = Math.round((e - s) / 1000);
saveFile.write('</table></body></html>');
alert("HTMLファイルの作成が終了しました。変換にかかった時間:"+time+"秒");
})();
[
サンプルをダウンロード]