今回のネタは、画像をHTMLのTableタグに変換するスクリプトです。画像を変換するプログラムはいくつか存在しますが、ここではHTML5のタグをベースにしてTableタグで画像を書き出します。
変換する画像はなるべく小さいものにしてください。というのも、実行に時間がかかるためです。MacPro（Xeon 2.26/8CPU）の場合、32×41ピクセルで変換に27秒ほど時間がかかります。
変換する画像はなるべく小さいものにしてください。というのも、実行に時間がかかるためです。MacPro（Xeon 2.26/8CPU）の場合、32×41ピクセルで変換に27秒ほど時間がかかります。
// Photoshopの画像をtableタグに変換
function pixelToTable(){
preferences.rulerUnits = Units.PIXELS;
for (var y=0; y<docObj.height.value; y++) {
text += '<tr>';
for (var x=0; x<docObj.width.value; x++){
var rgb = getPixel(x,y);
var R = rgb[0].toString(16);
var G = rgb[1].toString(16);
var B = rgb[2].toString(16);
if (R.length < 2){ R = "0" + R; }
if (G.length < 2){ G = "0" + G; }
if (B.length < 2){ B = "0" + B; }
text += '<td style="background-color:#'+R+G+B+'"></td>';
}
text += '</tr>';
}
activeDocument.selection.deselect();
}
//---------------------------------------------
// ピクセル値を取得する(8bitモード専用)
//---------------------------------------------
function getPixel(x,y){
var R = G= B= 0,data,i;
docObj.selection.select([[x,y],[x+1,y],[x+1,y+1],[x,y+1],[x,y]]);
data = docObj.channels[0].histogram;
for (i=0; i<256; i++) if (data[i] > 0) { R = i; break; }
data = docObj.channels[1].histogram;
for (i=0; i<256; i++) if (data[i] > 0) { G = i; break; }
data = docObj.channels[2].histogram;
for (i=0; i<256; i++) if (data[i] > 0) { B = i; break; }
return [R,G,B];
}
// 保存ファイル選択
var saveFile, text="", docObj;
(function(){
if (app.documents.length == 0){
alert("変換する画像ファイルを開いてから実行してください");
return;
}
docObj = activeDocument;
saveFile = File.saveDialog("保存するHTMLファイル名を入力してください");
if (!saveFile) { return; }
var flag = saveFile.open("w");
if (!flag){ alert("ファイルが開けません"); }
var s = (new Date()).getTime();
pixelToTable();
var e = (new Date()).getTime();
var time = Math.round((e - s) / 1000);
saveFile.write('<!DOCTYPE html><head><title>pixeltable</title></head><body>');
saveFile.write('<table style="border:0px solid black;border-collapse: collapse;">');
saveFile.write(text);
saveFile.write('</table></body></html>');
alert("HTMLファイルの作成が終了しました。変換にかかった時間："+time+"秒");
})();
【古籏一浩】[email protected]
< http://www.openspc2.org/
>
今回のネタは、Twitterで、HTML5でHTML5のロゴをTableタグで出力したらというジョークから採用しました。意外とPhotoshopは、こういった画像処理というか画像変換には向いていないアプリケーションだったりします。
それから、来月は2冊本が出ます。
1冊は
・JavaScriptコーディング ベストプラクティス
< http://www.amazon.co.jp/dp/4844361791
>
で、もう1冊が
・HTML5+JavaScriptアイデア＆実践サンプル
です。「HTML5+JavaScriptアイデア＆実践サンプル」は現時点ではAmazonでは取り扱ってないようです。あと、Acrobat XのJavaScriptのページも用意しました。
・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/
>