PSD解析工具实现(一)

原创
2016/03/23 00:39
阅读数 1.2W

包括做游戏,我们做程序的很多时候都是需要跟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

展开阅读全文
打赏
1
2 收藏
分享
加载中
更多评论
打赏
0 评论
2 收藏
1
分享
返回顶部
顶部