fixed: Windows path to url. issues: #1

zswang · Oct 23, 2015 · b5cb6c3 · b5cb6c3
1 parent ae86a14
commit b5cb6c3
Show file tree

Hide file tree

Showing 9 changed files with 75 additions and 5 deletions.
diff --git a/lib/h5psd.js b/lib/h5psd.js
@@ -4,8 +4,8 @@
  * Converting PSD files into mobile page
  * @author
  *   zswang (http://weibo.com/zswang)
- * @version 0.0.4
- * @date 2015-10-20
+ * @version 0.0.6
+ * @date 2015-10-23
  */
 var fs = require('fs');
 var mkdirp = require('mkdirp');
@@ -14,6 +14,7 @@ var colors = require('colors/safe');
 var crypto = require('crypto');
 var psd = require('psd');
 var jdists = require('jdists');
+var url = require('url');
 /**
  * 将 RGBA 转换成颜色表达式
  *
@@ -112,7 +113,7 @@ function build(filename, argv) {
         var md5 = crypto.createHash('md5');
         md5.update(buffer);
         var flag = md5.digest('hex');
-        image = images + '/' + flag.slice(1, 7) + '.png';
+        image = path.join(images, flag.slice(1, 7) + '.png');
         if (!md5dict[flag]) { // 内容没有出现过
           md5dict[flag] = true;
           if (!nodeInfo.text) { // 非文本节点
@@ -129,6 +130,7 @@ function build(filename, argv) {
           }
         }
       }
+      image = url.format(image); // @see issues#1 处理 Windows 路径分隔符
       if (isBackground) {
         h5.background = {
           name: nodeInfo.name,

diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "h5psd",
   "description": "Converting PSD files into mobile page",
-  "version": "0.0.5",
+  "version": "0.0.6",
   "main": "index.js",
   "bin": {
     "h5psd": "cli.js"
@@ -43,7 +43,7 @@
   },
   "scripts": {
     "test": "istanbul cover --hook-run-in-context node_modules/mocha/bin/_mocha -- -R spec",
-    "lint": "jshint src/*.js",
+    "lint": "jshint src/h5psd.js",
     "dist": "jdists src/h5psd.js -o lib/h5psd.js"
   },
   "files": [

diff --git a/page2/css/base.css b/page2/css/base.css
@@ -0,0 +1,40 @@
+html, body {
+  width: 414px;
+  max-height: 736px;
+  height: 100%;
+  margin: 0 auto;
+  padding: 0;
+  background-color: #fff;
+  overflow: hidden;
+  font-family: STHeiTi, Tahoma, Helvetica, Arial, sans-serif;
+}
+
+html {
+  background-color: #ddd;
+}
+
+h1, h2, h3, h4, h5, h6, article, section, div, p {
+  margin: 0;
+  padding: 0;
+}
+
+.container {
+  width: 100%;
+  height: 100%;
+  min-height: 500px;
+  position: relative;
+  overflow: visible;
+}
+
+.page {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  background-size: cover !important;
+  overflow: hidden;
+}
+
+.layer {
+  position: absolute;
+  z-index: 1;
+}
diff --git a/page2/images/107957.png b/page2/images/107957.png
diff --git a/page2/images/657d39.png b/page2/images/657d39.png
diff --git a/page2/images/c334bf.png b/page2/images/c334bf.png
diff --git a/page2/images/c4a688.png b/page2/images/c4a688.png
diff --git a/page2/m1.html b/page2/m1.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>m1.psd</title>
+  <link rel="stylesheet" type="text/css" href="css/base.css">
+  <script>
+  !function(){var i=screen.width/414;document.write('<meta name="viewport"content="width=414,initial-scale='+i+",maximum-scale="+i+", minimum-scale="+i+',user-scalable=no,target-densitydpi=device-dpi,minimal-ui"/>')}();
+  </script>
+</head>
+<body>
+  <div class="container">
+    <!--page-->
+    <div class="page" style="background:url(images/107957.png) no-repeat;">
+      <img class="layer" src="images/c334bf.png" style="left:48px;top:53px;" width="104" height="106">
+      <img class="layer" src="images/657d39.png" style="left:123px;top:221px;" width="104" height="106">
+      <img class="layer" src="images/c4a688.png" style="left:39px;top:397px;" width="104" height="106">
+      <p class="layer" style="left:172px;top:83px;font-size:28px;color:#003">服务用户</p>
+      <p class="layer" style="left:247px;top:251px;font-size:28px;color:#c00">质量保证</p>
+      <p class="layer" style="left:162px;top:449px;font-size:28px;color:#0c3">连接世界</p>
+    </div>
+    <!--/page-->
+  </div>
+</body>
+</html>
diff --git a/src/h5psd.js b/src/h5psd.js
@@ -24,6 +24,7 @@ var colors = require('colors/safe');
 var crypto = require('crypto');
 var psd = require('psd');
 var jdists = require('jdists');
+var url = require('url');
 
 /**
  * 将 RGBA 转换成颜色表达式
@@ -132,6 +133,7 @@ function build(filename, argv) {
         md5.update(buffer);
         var flag = md5.digest('hex');
         image = path.join(images, flag.slice(1, 7) + '.png');
+
         if (!md5dict[flag]) { // 内容没有出现过
           md5dict[flag] = true;
           if (!nodeInfo.text) { // 非文本节点
@@ -149,6 +151,7 @@ function build(filename, argv) {
         }
       }
 
+      image = url.format(image); // @see issues#1 处理 Windows 路径分隔符
       if (isBackground) {
         h5.background = {
           name: nodeInfo.name,