クリエイター手抜きプロジェクト[266]Adobe Bridge CS3/CS4/CS5編 画像をTableタグに変換する/古籏一浩

投稿:  著者:  読了時間:5分(本文:約2,400文字)


今回のネタも前回と同じく、画像を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+"秒");
})();


【古籏一浩】openspc@alpha.ocn.ne.jp
< http://www.openspc2.org/ >

コミPo! がバージョンアップされて、さらに便利に。という事で空いた時間で漫画作成......。

・コミPo!(v1.20に!)
< http://www.comipo.com/ >

・漫画:PC6001 vs mz-700
< http://www.openspc2.org/reibun/comipo/P6_vs_MZ/ >

・「HTML5+JavaScriptアイデア&実践サンプル」が、ようやくアマゾンに登録
されました。
< http://www.amazon.co.jp/dp/4048704486 >

JavaScriptコーディング ベストプラクティス
< http://www.amazon.co.jp/dp/4844361791 >

・Adobe Acrobat X + JavaScript例文辞典
< http://www.openspc2.org/reibun/AcrobatX/ >

・Google API Expertが解説するHTML5ガイドブック
< http://www.amazon.co.jp/dp/4844329278 >

・プロならば知っておくべきWebコーディング&デザインの定石100
< http://www.amazon.co.jp/dp/4844361538 >

・ハイビジョン映像素材集
< http://www.openspc2.org/HDTV/ >

・Adobe Illustrator CS3 + JavaScript 自動化サンプル集 発売中
< http://www.openspc2.org/book/PDF/Adobe_Illustrator_CS3_JavaScript_Book/ >