PSD解析工具實現（一）

包括作遊戲，咱們作程序的不少時候都是須要跟psd打交道，那麼如何對psd這個東西進行程序化操做就成爲了咱們提升工做效率的手段。

相信有研究過psd腳本的人都知道，psd的腳本是用js寫的，大致上懂js的人很快就能夠經過它的文檔寫出一些工具來，可是問題就是photoshop執行腳本的效率實在是不忍直視，慢到使人髮指，因此，此次是經過二進制的形式來對psd進行解析獲取裏面的圖片以及文本，而且把psd裏面對應的圖片保存到一個文件夾裏面。有了這些，基本上咱們就能夠構建本身的工具了，

由於二進制解析psd文件解析文檔裏面對文本樣式的解析藏得很深，除了ps5跟5.0版本以外，我在文檔裏面找不到獲取的辦法，因此仍是得藉助ps腳原本獲取psd裏面文本的樣式，順便也是瞭解一下怎麼使用photoshop的腳本：

1.新建一個psd文件test.psd，並建立一個樣式文本：

2.文件-->腳本 --> 瀏覽，選擇先前寫好的導出文本樣式的腳本文件test.jsx，psd的文件後綴是jsx

function docCheck() {
	if (!documents.length) {
		alert('There are no documents open.');
		return;
	}
}
docCheck(); //檢測當前psd

app.displayDialogs = DialogModes.NO;
var docRef = activeDocument;

var docWidth = docRef.width.value;
var docHeight = docRef.height.value;
var mySourceFilePath = activeDocument.fullName.path + "/";
//文檔信息
var str = "<psd filename=\"" + docRef.name + "\" path=\"" + mySourceFilePath + "\" width=\"" + docWidth + "\" height=\"" + docHeight + "\">\n";

var endTimestamp;
var startTimestamp;
traverseLayers = function(doc, fun) {
	var win = new Window("dialog{text:'操做窗口',bounds:[100,100,400,220],\
		btnOne:Button{bounds:[80,20,280,70] , text:'Export' },\
		prog:Progressbar{bounds:[20,90,280,101] , value:0,maxvalue:100},\
	};");  win.btnOne.onClick = function(){
		win.prog.value = 50;//(index++/layers.length)*100;
		startTimestamp=(new Date()).valueOf();
		var layers = doc.layers;	
		var index = 0;
		for (var i = layers.length - 1; i >= 0; i--) 
		{
			var layer = layers[i];
			_traverse(layer, fun);
		}
		win.prog.value = 100;
		endTimestamp=(new Date()).valueOf();
		alert("共處理"+count+"個文件，耗時："+(endTimestamp - startTimestamp)/1000+"sec");
	};	
	win.center();
	win.show();
};

var count = 0;
function _traverse(layer, fun) 
{
	count++;
	if (layer.typename == "LayerSet") 
	{ var layers = layer.layers;
		for (var i = layers.length - 1; i >= 0; i--) 
		{
			_traverse(layers[i], fun);
		}
	} 
	else 
	{
		fun(layer);
	}
};

traverseLayers(app.activeDocument, exportBounds);

function exportBounds(layer) {
	var lk=layer.kind;
	if(lk=="LayerKind.TEXT")
	{
		try
		{
			var bold;
			try
			{
				bold = layer.textItem.fauxBold;
			}
			catch(e)
			{
				bold = false;
			}
			
			var leading;
			try
			{
				leading = Number(layer.textItem.leading).toFixed(2);
			}
			catch(e)
			{
				leading = 0;
			}
			
			var underline;
			try
			{
				underline = (layer.textItem.underline !=  UnderlineType.UNDERLINEOFF);
			}
			catch(e)
			{
				underline = false;
			}
			
			var str2 = "\t<layer name=\"" + layer.name 
				+ "\" contents=\"" + layer.textItem.contents 
				+ "\" color=\"" + layer.textItem.color.rgb.hexValue 
				+ "\" font=\"" + layer.textItem.font
				+ "\" size=\"" + layer.textItem.size
				+ "\" fauxBold=\"" + bold
				+ "\" leading=\"" + leading
				+ "\" underline=\"" + underline
				+ "\" />\n";
			str += str2.toString();
		}
		catch(e)
		{
			alert(layer.name);
		}
	}
};

var csvFile = new File(mySourceFilePath.toString().match(/([^\.]+)/)[1] + app.activeDocument.name.match(/([^\.]+)/)[1] + ".xml");
csvFile.open('w');
csvFile.writeln(str + "</psd>");
csvFile.close();

上面的代碼主要工做就是針對當前的psd文檔，經過遞歸每一個圖層，若是是文本的話，就把文本對象的屬性輸出到一個xml裏面。

輸出結果：

<psd filename="test.psd" path="~/Desktop/test/" width="16" height="12">
<layer name="你們好" contents="你們好" color="FB0808" font="MicrosoftYaHei" size="24" fauxBold="true" leading="0" underline="false" />
</psd>

完成！！！

psd腳本的手冊： photoshop-cc-javascript-ref.pdf