クリエイター手抜きプロジェクト[320]Illustrator CS3/CS4/CS5/CS6編 自動的にトレースしSVG/PNG形式で保存する/古籏一浩

投稿:  著者:  読了時間:7分(本文:約3,200文字)


今回は、Illustratorで選択したフォルダ内にあるJPEG画像を、トレースしてSVG形式またはPNG形式にして保存するスクリプトです。

トレースした画像データをベクター形式で保存できるSVG形式であれば、HTML5対応のブラウザでも表示することができます。ベクター形式の場合、ブラウザで拡大しても画像がモザイクのように粗くなってしまうことがありません。

HTML5のインラインSVGにすると、JavaScriptで手軽に操作することもできます。以下のプログラムは、選択したフォルダ内にあるJPEG画像を開いて「カラー変換(16色)」でのトレースを行いSVG形式で保存します。




(function(){
var folder = Folder.selectDialog ("jpeg画像があるフォルダを選択");
if (!folder){ return; }
var fileList = folder.getFiles("*.jpg");
for(var i=0; i<fileList.length; i++){
var doc = app.documents.add(DocumentColorSpace.RGB, 384, 216);
var img = app.activeDocument.placedItems.add();
img.file = fileList[i];
var t = img.trace();
var trObj = t.tracing; // Tracing Object
trObj.tracingOptions.loadFromPreset (app.tracingPresetsList[3]);
// SVG Save
var savefile = new File(folder.fsName+"/"+i+".svg");
var opt = new ExportOptionsSVG();
opt.embedRasterImages = false; // 画像を埋め込む時は true
opt.embedAllFonts = false; // フォントを埋め込まない時は false
opt.documentEncoding = SVGDocumentEncoding.UTF8; // 文字コードは UTF-8
opt.fontType = SVGFontType.OUTLINEFONT; // アウトラインにする
opt.fontSubsetting = SVGFontSubsetting.GLYPHSUSED;
opt.compressed = false; // 圧縮する場合は true
app.activeDocument.exportFile(savefile, ExportType.SVG, opt);
app.activeDocument.close(SaveOptions.DONOTSAVECHANGES);
}
})();

次にPNG形式で保存するスクリプトです。

(function(){
var folder = Folder.selectDialog ("jpeg画像があるフォルダを選択");
if (!folder){ return; }
var fileList = folder.getFiles("*.jpg");
for(var i=0; i<fileList.length; i++){
var doc = app.documents.add(DocumentColorSpace.RGB, 384, 216);
var img = app.activeDocument.placedItems.add();
img.file = fileList[i];
var t = img.trace();
var trObj = t.tracing; // Tracing Object
trObj.tracingOptions.loadFromPreset (app.tracingPresetsList[3]);
// PNG Save
var savefile = new File(folder.fsName+"/"+i+".png");
var opt = new ExportOptionsPNG24();
opt.antiAliasing = true; // アンチエイリアシング。falseだとアンチなし
opt.transparency = true; // 透過させたくない場合はfalse
opt.saveAsHTML = false; // HTMLファイルも生成するか
app.activeDocument.exportFile(savefile, ExportType.PNG24, opt);
app.activeDocument.close(SaveOptions.DONOTSAVECHANGES);
}
})();

どちらのスクリプトも「カラー変換(16色)」でのトレースを行いますが、これ以外の形式でのトレースを行いたい場合もあります。その場合は、以下の行の app.tracingPresetsList[3] の3の数値を変更します。

trObj.tracingOptions.loadFromPreset (app.tracingPresetsList[3]);

この数値は以下のトレース形式と対応しています。

1.........単純トレース
2.........カラー変換(6色)
3.........カラー変換(16色)
4.........写真(低精度)
5.........写真(高精度)
6.........グレースケール
7.........手書きスケッチ
8.........詳細なイラストレーション
9.........コミックアート
10......図面
11......白黒のロゴ
12......単色ロゴ
13......ペン画
14......文字

また、ドキュメントサイズを設定していますが、書き出し時には無視されますので特に変更しなくても大丈夫です。

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

メインマシンのOSが入っていたHDDがおかしくなったので、新しいHDDに交換しました。日立の4TB HDDにしたら、今までの2倍くらい速い状態になり快適になりました。しかし、今度はマシンの前に座る時間が減ってしまいました。こういう忙しいときは、ストック原稿があると楽。

・毎度おなじみアスキーの連載
 「File system APIでブラウザーで動くファイラーを作る」
< http://ascii.jp/elem/000/000/696/696368/ >

・PDF構造解説
< http://www.amazon.co.jp/dp/4873115493 >

・10日で覚えるHTML5入門教室
< http://www.amazon.co.jp/dp/4798124184 >

・AndroidのためのHTML5本格アプリ開発
< http://www.amazon.co.jp/dp/4897978971/ >

・新標準HTML5 & CSS3辞典
< http://www.amazon.co.jp/dp/4844331752/ >

・改訂5版JavaScriptポケットリファレンス
< http://www.amazon.co.jp/dp/4774148199 >

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

・クリエイター手抜きプロジェクト
< http://www.openspc2.org/projectX/ >

・Adobe Illustrator CS3 + JavaScript 自動化サンプル集
< http://www.openspc2.org/book/PDF/Adobe_Illustrator_CS3_JavaScript_Book/ >
吉田印刷所の「印刷の泉」でも購入できるようになりました。