imgcook 是用以各類型圖像為材料做菜的的星級(jí)大廚，中文譯名圖片大廚，通過(guò)智能化手段將各種圖像一鍵生成可維護(hù)的 UI 視圖代碼，能夠高度還原各種圖像，釋放 UI 開(kāi)發(fā)生產(chǎn)力，讓你關(guān)注更具挑戰(zhàn)性的事情，如果您對(duì)圖片處理有需求的話，就趕緊來(lái)下載它吧！

安裝說(shuō)明

1. 下載并安裝 PS 插件

在網(wǎng)站首頁(yè)下載 PS 版插件，解壓文件后會(huì)得到對(duì)應(yīng)操作系統(tǒng)的插件安裝器文件以及試驗(yàn)田試玩 PSD 文件。安裝器安裝流程如下：

Mac 用戶：雙擊 imgcook.photoshop_version.pkg 文件，按步驟提示進(jìn)行安裝，安裝完畢后可重啟 PhotoShop，在 Window(窗口)->Extensions(擴(kuò)展文件) 找到 imgcook 插件。如果遇到軟件不可信問(wèn)題，可前往 系統(tǒng)偏好設(shè)置 -> 安全性與隱私 -> 仍要打開(kāi)。

Windows 用戶：雙擊 imgcook.photoshop_version.exe 文件 ，按步驟提示進(jìn)行安裝，大概耗時(shí)幾分鐘，安裝完畢后可重啟 PhotoShop，在 Window(窗口)->Extensions(擴(kuò)展文件) 找到 imgcook 插件。

如果上述安裝器安裝流程出現(xiàn)異常(比如 Windows 安裝過(guò)程卡住時(shí)間很久)，可嘗試手動(dòng)安裝。

解壓 imgcook.photoshop.zip 文件，根據(jù)各自的系統(tǒng)將解壓后的目錄文件放置到以下指定目錄里，重啟 PhotoShop 即可在 Window(窗口)->Extensions(擴(kuò)展文件) 找到 imgcook 插件。

插件手動(dòng)安裝指定目錄

Mac OS: /Library/Application Support/Adobe/CEP/extensions/

Windows x64: C:/Program Files (x86)/Common Files/Adobe/CEP/extensions/

Windows x32: C:/Program Files/Common Files/Adobe/CEP/extensions/

2. 簽署問(wèn)題

安裝完 imgcook 插件后，打開(kāi) PhotoShop 可在 Window(窗口)->Extensions(擴(kuò)展文件) 找到 imgcook 插件，首次呼起插件會(huì)提示 插件未經(jīng)正確授權(quán) 錯(cuò)誤，可通過(guò)以下操作解決。

Mac

打開(kāi) Terminal 終端，針對(duì)不同 Adobe PhotoShop CC 版本可在終端執(zhí)行以下命令：

CC 2015: defaults write com.adobe.CSXS.6 PlayerDebugMode 1

CC 2015.5: defaults write com.adobe.CSXS.7 PlayerDebugMode 1

CC 2017: defaults write com.adobe.CSXS.7 PlayerDebugMode 1

CC 2018: defaults write com.adobe.CSXS.8 PlayerDebugMode 1

Windows

打開(kāi)注冊(cè)表(運(yùn)行 regedit)

找到 HKEY_CURRENT_USERSoftwareAdobe

針對(duì)不同 CC 版本找到對(duì)應(yīng)的 CSXS 項(xiàng)，比如 CSXS.7

鼠標(biāo)右鍵新建字符串值

選中剛新建的字符串值注冊(cè)表-鼠標(biāo)右鍵-修改-數(shù)值名稱：PlayerDebugMode 數(shù)值數(shù)據(jù)：1

CC 2015：HKEY_CURRENT_USERSoftwareAdobeCSXS.6

CC 2015.5：HKEY_CURRENT_USERSoftwareAdobeCSXS.7

CC 2017：HKEY_CURRENT_USERSoftwareAdobeCSXS.7

CC 2018：HKEY_CURRENT_USERSoftwareAdobeCSXS.8

執(zhí)行完上述流程后，重啟 PS 重新打開(kāi) Window(窗口)->Extensions(擴(kuò)展文件)-> imgcook 可看到一個(gè)小終端界面。

軟件特點(diǎn)

智能化

全鏈路采用計(jì)算機(jī)視覺(jué)、深度學(xué)習(xí)等智能化手段依次去除對(duì)設(shè)計(jì)稿的約束，智能生成代碼。

精度還原

一鍵智能還原與豐富的操作面板

imgcook官方版可以實(shí)時(shí)保證代碼和視覺(jué)的高度還原

DSL多樣

自定義編寫(xiě)代碼模板

支持小程序、React、H5、Weex Rax 等，外部暫時(shí)不支持自定義代碼模板。

高可維護(hù)性

DOM 嵌套合理、相對(duì)定位布局、文本自適應(yīng)

ClassName語(yǔ)義化、循環(huán)可自動(dòng)識(shí)別

主要問(wèn)題

淘寶 imgcook 主要解決的問(wèn)題是：使用圖像生成代碼的時(shí)候，我們關(guān)心的不僅僅是生成 UI 的還原度，也關(guān)心生成的代碼是否合理、可維護(hù)，

如果生成的代碼屬于不可讀不可維護(hù)的快餐代碼，開(kāi)發(fā)使用上再對(duì)其進(jìn)行二次開(kāi)發(fā)就會(huì)顯得極為艱難，而往往后者的難度相比前者更甚，如果需要在生產(chǎn)環(huán)境中使用，這個(gè)問(wèn)題就無(wú)法避免。

對(duì)此，imgcook 的定位就在于解決 UI 還原以及生成可維護(hù)代碼的問(wèn)題。

對(duì)于可維護(hù)性代碼的問(wèn)題，imgcook 會(huì)對(duì)還原后的 UI 在代碼層面上生成目前使用比較廣泛的 Flexbox 布局以及相對(duì)定位布局，在一些自定義的命名上（比如樣式命名），

imgcook 也會(huì)根據(jù)開(kāi)發(fā)者的習(xí)慣生成更加人性化的命名