[原创/分享]JS扩展Photoshop新功能：前端架构辅助工具

vickeychen 楼主

PS前端架构辅助v2.0.1版2007-11-14发布，欢迎各位前端架构师下载试用，欢迎反馈使用建议。
　　推出目的，可以快速生成HTML代码和CSS样式－－选中一个选区，按下F2，代码立即生成图片也立即保存好了
    相信Photoshop是“凡是称得上电脑高手”的人都会的图片处理软件，鸽子也特别喜欢画画（设计），这个软件也用得特溜，闭着眼都可以玩了。呵，于是也就想到为Photoshop增加新功能。记得去年工作的时候扩展了CorelDraw，发现功能还真实用。

    升级日志：
升级时间2007-11-14，主要升级特性：

• ·增加导出背景重复设置；
• ·增加了（为减少请求次数）而使用一张图来切割生成各种小图标的CSS快捷方式；
• ·增加了是否导出当前边框设置的复选框；
• ·优化了UI界面；
  

  [注]安装或使用过程中遇到了问题，请向我发邮件，我的伊妹儿/MSN/QQ都是：www@xiaogezi.cn。

　[运行环境]：Windows Vista，Windows XP sp2，Mac Os,
                   Photoshop cs3+ (注意一定要是这个版本的,低于这个版本的运行报错),
                   IE 6.0+;

效果如图：
      最新版下载地址：http://www.nihaoku.cn/temp/xExportv2.0.1.rar

         安装方法：把解压的：xExportv2.0.1.jsx 拷贝到 C:\Program Files\Adobe\Photoshop CS3\Presets\Scripts,

                      打开Photoshop CS3，“窗口”-> “动作”-> 打开“动作面板”，新建动作，设置快捷键为F2。在面板选项里选择“选择菜单项” -> “文件” -> “脚本” -> “xExportv2.0.1.jsx” (如果脚本列表里面没有，请选择“浏览”来选择)。

      使用方法：使用框选工具，选择要导出图片的部分，设置要保存图片的位置（默认是D：\），按下F2，轻松设置即可生成符合W3C标准的HTML代码，图片也保存好了。

      操作案例： http://www.esieo.com/demo/ 这个网页的HTML文档的代码就是精彩案例。

1. #target photoshop
   
2. app.bringToFront();
   
3. $.localize = true;
   
4. 
   
5. /*
   
6.       程式名：扩展Photoshop之导出选区到图片并生成DIV+CSS(xhtml)代码；
   
7. 　　Code By Linr Chen,My website http://www.nihaoku.cn/  http://www.xiaogezi.cn/
   
8.       JavaScript File Name:xExport.jsx
   
9. */
   
10. 
    
11. if (app.documents.length == 0)
    
12. {
    
13.   var docRef = app.documents.add();
    
14. }
    
15. else
    
16. {
    
17.   var docRef = app.activeDocument;
    
18.   var obj = docRef.selection;
    
19. }
    
20. var okBtn = "确定";
    
21. var cleBtn = "取消";
    
22. var strTitle=" 图片到源代码 Image to HTML - Linr Studio";
    
23. var strButtonBrowse = localize("$$$/JavaScripts/ExportLayersToFiles/Browse=&Browse...");
    
24. var dlg;
    
25. 
    
26. /* 创建Win form 窗体 */
    
27. function createDlg(css,htm)
    
28. {
    
29. dlg = new Window("dialog",strTitle,[200,250,630,560],undefined);
    
30. dlg.orientation = 'column';
    
31. dlg.alignChildren = 'left';
    
32. dlg.toHTMLIDlbl = dlg.add( 'statictext', [10,12,55,30], 'DIV ID：', '');
    
33. dlg.toHTMLID = dlg.add( 'edittext', [56,10,220,30], '', {multiline:false, readonly:false} );
    
34. dlg.toHTMLbtn = dlg.add("button",[222,8,320,32],"生成DHTML...");
    
35. ....
    
36. 代码过长故省略，可以通过下载附件来查看

复制代码

[ 本帖最后由 vickeychen 于 2007-11-16 11:14 编辑 ]

yachuan520

好东西收藏了。

binghexijian

还有这个东西？？

555wang

不错的东西  

maklove

我的和你图片上的版本一样.为什么找不到这个目录 \Adobe\Photoshop CS3\Presets\Scripts.
没有Presets这个文件夹/怎么解决?

vickeychen 楼主

楼上的，可能是中文版的，中文版的路径：　\Adobe\Photoshop CS3\预置\脚本.

vickeychen 楼主

设置F2为启动快捷键的方法：
　
　＂窗口＂->＂动作＂ -> ＂新建动作(图标)＂ -> 输入动作名，选择＂F2＂为快捷键，按回车确定，开始录制动作.

　在动作面板在右上角打开面板菜单，＂插入菜单项目＂，这个插入菜单项目对话框不要理它，去选择 -> ＂文件＂->＂脚本＂->＂xExportv2.0.1＂，回车确定插入菜单项目对话框 -> ＂停止动作(图标)＂.一切OK.关了ps,再开一次.打开一个文档，选择一个选区，按下F2键试下，如果设置正确的话，将会成功启动.

km268

功能上加強點，保存圖片的名稱最好不要是一串數字

wtzzy

弄明白了

[ 本帖最后由 wtzzy 于 2007-11-16 13:56 编辑 ]

4767850

好东西,楼主同志辛苦了!牛啊!网页美工的帮手

lx3735735

牛昂
确实是好东西
明天去公司就去炫耀炫耀
哈哈

lx3735735

没大怎么弄明白
挺怪的
呵呵

fredliu

基本上用不到！

lu124968186

有意思啊

marsvip

中文版的安装报错
Error 21:undefined 不是对象。Line:214 ->

snail5

下载来的代码好象都是乱码样的
是不是加了密啊？
能给份源码学习吗？

zevitca

niu a .收藏了。

zevitca

原帖由 marsvip 于 2007-11-19 10:00 发表
中文版的安装报错
Error 21:undefined 不是对象。Line:214 ->

必须先框选

blankion

打开Photoshop CS3，“窗口”-> “动作”-> 打开“动作面板”，新建动作，设置快捷键为F2。在面板选项里选择“选择菜单项” -> “文件” -> “脚本” -> “xExportv2.0.1.jsx” (如果脚本列表里面没有，请选择“浏览”来选择)。

这步操作有问题，“在面板选项里选择“选择菜单项” -> “文件” -> “脚本” -> “xExportv2.0.1.jsx””面板选项是指？

hbgsp

导出后只看得到图片,没有html文件

chenhaitaogood

请问是不是，有了这插件就不用布局网页手写代码了？

daoying2000

不可能发生的事情

kyan

大家可以参考Adobe的ExtendScript Toolkit 2的SDK。利用还可以做出更多你想不到不到的事情。

maklove

安装有问题 楼主 还给抓图说明下吧.......

在面板选项里选择“选择菜单项” -> “文件” -> “脚本” -> “xExportv2.0.1.jsx” (如果脚本列表里面没有，请选择“浏览”来选择)。

这步操作有问题

footya

选菜单里面的 "文件"—>"脚本"-->"浏览"

kucz520

好东东啊，谢谢楼主分享～～

footya

要是楼主把源码共享出来，大家不断开发新功能就更好了

vickeychen 楼主

代码太多了，放出部分源文件，有意者联系我，我的QQ/MSN/E-mail都是www@xiaogezi.cn

前端架构 v1.0.1(旧)版部分源代码：

1. #target photoshop
   
2. app.bringToFront();
   
3. $.localize = true;
   
4. 
   
5. /*
   
6.       程式名：扩展Photoshop之导出选区到图片并生成DIV+CSS(xhtml)代码；
   
7. 　　Code By Linr Chen,My website http://www.xiaogezi.cn/
   
8.       JavaScript File Name:xExport.jsx
   
9. */
   
10. 
    
11. if (app.documents.length == 0)
    
12. {
    
13.   var docRef = app.documents.add();
    
14. }
    
15. else
    
16. {
    
17.   var docRef = app.activeDocument;
    
18.   var obj = docRef.selection;
    
19. }
    
20. var okBtn = "确定";
    
21. var cleBtn = "取消";
    
22. var strTitle=" 图片到源代码 Image to HTML - Linr Studio";
    
23. var strButtonBrowse = localize("$$$/JavaScripts/ExportLayersToFiles/Browse=&Browse...");
    
24. var dlg;
    
25. 
    
26. /* 创建Win form 窗体 */
    
27. function createDlg(css,htm)
    
28. {
    
29. dlg = new Window("dialog",strTitle,[200,250,630,560],undefined);
    
30. dlg.orientation = 'column';
    
31. dlg.alignChildren = 'left';
    
32. dlg.toHTMLIDlbl = dlg.add( 'statictext', [10,12,55,30], 'DIV ID：', '');
    
33. dlg.toHTMLID = dlg.add( 'edittext', [56,10,220,30], '', {multiline:false, readonly:false} );
    
34. dlg.toHTMLbtn = dlg.add("button",[222,8,320,32],"生成DHTML...");
    
35. dlg.toHTMLpathlbl = dlg.add( 'statictext', [10,42,55,60], '文件名：', '');
    
36. dlg.toHTMLpath = dlg.add("edittext",[56,40,220,60],'',{multiline:false, readonly:false});
    
37. dlg.toHTMLtypejpg=dlg.add("radiobutton",[230,40,270,60],'JPG',{value:true,active:true});
    
38.        dlg.toHTMLtypejpg.value=true;
    
39. dlg.toHTMLtypegif=dlg.add("radiobutton",[275,40,310,60],'GIF','');
    
40. dlg.toHTMLtypepng=dlg.add("radiobutton",[315,40,360,60],'PNG','');
    
41. dlg.toHTMLhtmlbl = dlg.add( 'statictext', [10,65,80,85], 'xHTML：', '');
    
42. dlg.toHTML=dlg.add( 'edittext', [10,85,420,170], htm, {multiline:true, readonly:false} );
    
43. dlg.toHTMLcsslbl = dlg.add( 'statictext', [10,175,80,195], 'CSS2.0：', '');
    
44. dlg.toCSS=dlg.add( 'edittext', [10,195,420,280],css, {multiline:true, readonly:false} );
    
45. dlg.toHTMLbtn.addEventListener ("onClick","getSize", "");
    
46. dlg.toHTMLlinklbl = dlg.add( 'statictext', [10,282,450,320], '(C)Linr Studio 2007 琳儿工作室  http://www.nihaoku.cn/', '');
    
47. dlg.toHTMLID.()
    
48. {
    
49.   dlg.toHTML.text=dlg.toHTML.text.replace(/id=\"[0-9a-zA-Z]+\"/gi,"id=\""+dlg.toHTMLID.text+"\"");
    
50.   dlg.toCSS.text = dlg.toCSS.text.replace(/#[0-9a-zA-Z]+\{/gi,"#"+dlg.toHTMLID.text+"{");
    
51. }
    
52. dlg.toHTMLbtn.onClick = function() {
    
53.   var extname='';
    
54.    if(dlg.toHTMLtypejpg.value)extname='jpg';
    
55.    if(dlg.toHTMLtypegif.value)extname='gif';
    
56.    if(dlg.toHTMLtypepng.value)extname='png';
    
57.    if(dlg.toHTMLpath.text!=''){dlg.toHTML.text=getInfo(dlg.toHTMLID.text,dlg.toHTMLpath.text,extname).vhtm;dlg.toCSS.text=getInfo(dlg.toHTMLID.text,dlg.toHTMLpath.text,extname).vcss;}
    
58.    if(dlg.toHTMLpath.text!='' && extname!='')exportFile(extname,'d:\\'+dlg.toHTMLpath.text.replace(/\//gi,'\\')+'.'+extname);
    
59. }
    
60. dlg.show();
    
61. }
    
62. createDlg(getInfo().vcss,getInfo().vhtm);
    
63. function exportFile(api,path)
    
64. {
    
65. var saveFilePath=new File(path);
    
66.   switch(api)
    
67.   {
    
68.    
    
69.    case 'jpg':
    
70.       /* 保存为jpeg格式 */
    
71.      try
    
72.        {
    
73.   ...
    
74.        }
    
75.        catch (e)
    
76.      {   // display error
    
77.        alert("导出JPG格式时发生错误!错误信息如下： \r\r" + e);
    
78.        return;   // quit
    
79.      }
    
80.      break;
    
81.    
    
82.      /* 保存为gif格式 */
    
83.    case 'gif':
    
84.      try
    
85.      {
    
86.   ...
    
87.      }
    
88.      catch(e)
    
89.      {
    
90.       alert("导出GIF格式时发生错误!错误信息如下： \r\r" + e);
    
91.       return;   // quit
    
92.      }
    
93.      break;
    
94.      
    
95.     /* 保存为png格式 */
    
96.    case 'png':
    
97.     try
    
98.     {
    
99.   ...
    
100.     }
     
101.     catch(e)
     
102.     {
     
103.       alert("导出PNG格式时发生错误!错误信息如下： \r\r" + e);
     
104.       return;   // quit
     
105.     }
     
106.     break;
     
107.   }
     
108. }
     
109. /* 获取选区的属性 */
     
110. function getInfo(id,str,ext)
     
111. {
     
112. var _width,_height,_left,_top,_bottom,_right;
     
113. var selobj = docRef.selection;
     
114. var sel=docRef.selection.bound;
     
115. 
     
116. var cssText,html,bgimg=str;
     
117. id=(id)?id:'div';
     
118. str=(str && ext)?'&#92;t<img src="'+str+'.'+ext+'" alt="" />':'';
     
119. bgimg=(bgimg && ext)?'background:url(../images/'+bgimg+'.'+ext+') 0 0 no-repeat;':'';
     
120. /* 获取left,top,right,bottom,width,height 等值 */
     
121.    _left=sel[0].value;
     
122.    _top=sel[1].value;
     
123.    _right=sel[2].value;
     
124.    _bottom=sel[3].value;
     
125.    _width=_right-_left;
     
126.    _height = _bottom-_top;
     
127. /* 获取HTML,CSS */
     
128.    cssText = '#'+id+'{width:'+_width+'px;height:'+_height+'px;'+bgimg+'}';
     
129.    html ='<div id="'+id+'" class="">&#92;r&#92;n'+str+'&#92;r&#92;n</div>';
     
130. //alert('CSS：&#92;r&#92;n&#92;t'+cssText);
     
131. //alert('HTML：&#92;r&#92;n&#92;t'+html);
     
132. return {vcss:cssText,vhtm:html};
     
133. }

复制代码

vickeychen 楼主

添加F2成为快捷键的方法，flash演示

menhin

原帖由 chenhaitaogood 于 2007-11-19 16:36 发表
请问是不是，有了这插件就不用布局网页手写代码了？

那就发了!