告别庞大 PSD，轻松测量尺寸

时间 2019-11-06

标签告别庞大 psd 轻松测量尺寸繁體版

原文原文链接

原由

做为前端工程师，平常开发离不开 psd 文件。javascript

可是平常开发的一个小弹窗页面，它的 psd 竟然须要 30+Mb，因此常常得按期清理 psd...html

对于我一个 PS 小菜鸡来讲，用 PSD 无非只是须要用来度量元素大小（元素间距），查看属性等简单的功能。前端

思考，对比

相对比于 sketch，sketch 具备 sketch-measure，设计师导出成静态资源给前端便可。java

对于 PSD 来讲，市面上已经有如 pxcook / lanhuapp，体验也很不错，可是须要下载 U 同窗提供的 (庞大的) psd 才能进行标注体验。node

并且有时候仍是须要 U 同窗给(庞大的) PSD 文件，咱们才能在 pxcook / lanhuapp 中自动标注。webpack

因而鉴于以上，考虑作一个开源项目，相似于 sketch-measure，定位为 psd-measure。git

效果展现

DEMO
源码，欢迎 stargithub

命令行

咱们也可使用命令行来导出页面标注web

bashchrome

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 插件

提供 Chrome 插件，当咱们点击 psd 连接时候跳出 Measure UI，而不是下载 PSD，固然咱们也能够点击右上方的下载进行下载。

安装

下载扩展，点击下载
打开 Chrome 扩展页面： chrome://extensions/
拖拽下载的包至页面中进行安装
出现该图标表示安装完成

设计与实现

流程以下：

PSD 文件格式介绍

File Header（定长）主要包括这个 psd 文件总体的数据，如版本，尺寸大小，图片通道数，使用的颜色类别（rgb、cmyk...）
Color Mode Data Section（变长）主要是部分颜色类型图片须要用到
Image Resources（变长）放置一些外部的图片资源
Layer and Mask（变长）放置图层和蒙层的各类信息，大小位置，字体，描边等等
Image Data（变长）放置图像像素数据

PSD.js

使用 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-html

将 PSD 解析为 HAST，进而转换为 HTML

HAST (HTML 抽象语法树)

以下 html：

<a href="http://alpha.com" class="bravo" download></a>

对应 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

html-measure 交互

布局定位

将 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
  )
}

measure-export(-cli)

输入 psd / html 导出 meas-ui 静态资源，流程如图（区分 prod 和 dev 环境）

.svg)

Todo

[ ] 提供 chrome 插件：当浏览器打开 psd 时候，渲染测量尺寸 UI

参考资料

Adobe Photoshop File Formats Specification PS 文件格式官方标准
Photoshop Styles File Format
JS. 如何判断两个矩形是否相交
HAST