摘要：起因作為前端工程師，日常開發離不開文件。對于來說，市面上已經有如，體驗也很不錯，但是需要下載同學提供的龐大的才能進行標注體驗。而且有時候還是需要同學給龐大的文件，我們才能在中自動標注。

作為前端工程師，日常開發離不開 psd 文件。

但是日常開發的一個小彈窗頁面，它的 psd 居然需要 30+Mb，所以經常得定期清理 psd...

對于我一個 PS 小菜雞來說，用 PSD 無非只是需要用來度量元素大小（元素間距），查看屬性等簡單的功能。

相對比于 sketch，sketch 具有 sketch-measure，設計師導出成靜態資源給前端即可。

對于 PSD 來說，市面上已經有如 pxcook / lanhuapp，體驗也很不錯，但是需要下載 U 同學提供的 (龐大的) psd 才能進行標注體驗。

而且有時候還是需要 U 同學給(龐大的) PSD 文件，我們才能在 pxcook / lanhuapp 中自動標注。

于是鑒于以上，考慮做一個開源項目，類似于 sketch-measure， 定位為 psd-measure。

DEMO
源碼，歡迎 star

我們也可以使用命令行來導出頁面標注

bash

npm i measure-export-cli -g
# 開啟服務，在線預覽 `path/to/psdDir` 下的 psd
measure-export start path/to/psdDir
# 構建 `path/to/psdDir` 下的 psd 至 `dist` 文件目錄
measure-export build path/to/psdDir

提供 Chrome 插件，當我們點擊 psd 鏈接時候跳出 Measure UI，而不是下載 PSD，當然我們也可以點擊右上方的下載進行下載。

下載擴展，點擊下載

打開 Chrome 擴展頁面： chrome://extensions/

拖拽下載的包至頁面中進行安裝

出現該圖標表示安裝完成

流程如下：

File Header（定長） 主要包括這個 psd 文件整體的數據，如版本，尺寸大小，圖片通道數，使用的顏色類別（rgb、cmyk...）

Color Mode Data Section（變長） 主要是部分顏色類型圖片需要用到

Image Resources（變長） 放置一些外部的圖片資源

Layer and Mask（變長） 放置圖層和蒙層的各種信息，大小位置，字體，描邊等等

Image Data（變長） 放置圖像像素數據

使用 psd.js 便是解析上述文件結構，得到可讀的數據結構。
其中 psd.js 使用 getter 得到懶解析數據，即如下代碼：

const obj = Object.defineProperty({}, "someParsedVal", {
  get: function () {
    if (!this._someParsedVal) {
      const afterMs = Date.now() + 3000
      while (true) {
        if (Date.now() >= afterMs) {
          this._someParsedVal = "ok"
          break
        }
      }
    }
    return this._someParsedVal
  }
})

obj.someParsedVal // 3s 后出來
obj.someParsedVal // 很快

在 mobx3 中也有類似的設計（LazyInitializer）

將 PSD 解析為 HAST，進而轉換為 HTML

如下 html：

對應 HAST 為

{
  "type": "element",
  "tagName": "a",
  "properties": {
    "href": "http://alpha.com",
    "id": "bravo",
    "className": ["bravo"],
    "download": true
  },
  "children": []
}

前后端同構的意思：同時運行在客戶端和服務端，具體便是同時執行在瀏覽器環境和 nodejs 環境

實現前后端同構的一些常用方式，借助構建工具 browserify / rollup / webpack 來分別打包不同環境的 js

模擬環境

在 nodejs 環境，對于 nodejs built-in modules 不進行打包

在 browser 環境，則將預設的 built-in modules 打包進去，以及一些 global 變量（如 process.env / __dirname）也會進行 mock

利用 變量替換 + treeshake 區分不同環境的代碼

如 webpack 配置 DefinePlugin

{
  plugins: [
    new webpack.DefinePlugin({
      "process.env.RUN_ENV": JSON.stringify("browser")
    })
  ]
}

在代碼中對不同環境打包進行區分

module.exports =
  process.env.RUN_ENV === "browser"
    ? {
        psdToHtml,
        psdToHtmlFromBuffer,
        psdToHtmlFromURL,
        psdToHAST,
        psdToHASTFromBuffer
      }
    : {
        psdToHtml,
        psdToHtmlFromPath,
        psdToHtmlFromBuffer,
        psdToHAST,
        psdToHASTFromBuffer,
        psdToHASTFromPath
      }

最終打包出來的 js 則會剔除掉 psdToHASTFromPath 相關代碼

package.json 配置

如下：

{
  "main": "dist/psd-html.cjs.js",
  "browser": "dist/psd-html.browser.cjs.js",
  "cdn": "dist/psd-html.browser.umd.min.js",
  "unpkg": "dist/psd-html.browser.umd.min.js"
}

main: nodejs 環境加載的 js

browser: browser 環境加載的 js

cdn: 部分 cdn 服務加載的 js

unpkg: unpkg cdn 服務加載的 js （主要使用 UMD 規范打包）

直接訪問 https://unpkg.com/@moyuyc/psd... 則會重定向至 https://unpkg.com/@moyuyc/psd...{latest-version}/dist/psd-html.browser.umd.min.js

將 psd 導出成整個圖片，利用每一個圖層的定位和大小來自動標注。

2 個 div，相對與同一個父級的絕對定位，如何判斷他們是否相交？

.
.
.
.
.
.
.
.
.
.

正面直接判斷是很費力的，要考慮各種情況，這時候需要逆向思維，考慮不相交的情況。
這時候就簡單了

不相交只要滿足下面四種情況之一就可以

function isIntersect(node1, node2) {
  const rect1 = node1.getBoundingClientRect()
  const rect2 = node2.getBoundingClientRect()
  return !(
    rect1.right < rect2.left ||
    rect1.left > rect2.right ||
    rect1.bottom < rect2.top ||
    rect1.top > rect2.bottom
  )
}

輸入 psd / html 導出 meas-ui 靜態資源，流程如圖（區分 prod 和 dev 環境）

.svg)

[ ] 提供 chrome 插件：當瀏覽器打開 psd 時候，渲染測量尺寸 UI

@moyuyc/psd.js - 解析 psd 文件，格式化 (Forked from psd.js)

@moyuyc/psd-html - psd -> hast -> html

html-measure - 標注交互

meas-ui - 前端 UI 展示，包含標注交互

measure-export(-cli) - 輸入 psd / html 導出 meas-ui 靜態資源

Adobe Photoshop File Formats Specification PS 文件格式官方標準

Photoshop Styles File Format

JS. 如何判斷兩個矩形是否相交

HAST