-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathfeed.xml
299 lines (273 loc) · 20.5 KB
/
feed.xml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">
<title><![CDATA[Guirong]]></title>
<subtitle><![CDATA[guirong's personal site]]></subtitle>
<link href="/feed.xml" rel="self"/>
<link href="http://guirong.github.io/"/>
<updated>2014-11-03T12:19:19.112Z</updated>
<id>http://guirong.github.io/</id>
<author>
<name><![CDATA[guirong cao]]></name>
<email><![CDATA[[email protected]]]></email>
</author>
<generator uri="http://zespia.tw/hexo/">Hexo</generator>
<entry>
<title><![CDATA[About Head Html Tag]]></title>
<link href="http://guirong.github.io/2014/11/head.html"/>
<id>http://guirong.github.io/2014/11/head.html</id>
<published>2014-11-03T12:19:14.000Z</published>
<updated>2014-11-03T12:19:14.000Z</updated>
<content type="html"><![CDATA[<ol>
<li><a href="http://open.mb.qq.com/doc?id=1201" target="_blank" rel="external">http://open.mb.qq.com/doc?id=1201</a></li>
<li><a href="http://fex.baidu.com/blog/2014/10/html-head-tags/" target="_blank" rel="external">http://fex.baidu.com/blog/2014/10/html-head-tags/</a></li>
</ol>
]]></content>
<summary type="html">
<![CDATA[<ol>
<li><a href="http://open.mb.qq.com/doc?id=1201" target="_blank" rel="external">http://open.mb.qq.com/doc?id=1201</a></li>
<li><a href="]]>
</summary>
</entry>
<entry>
<title><![CDATA[智能生活-潮玩酷]]></title>
<link href="http://guirong.github.io/2014/11/tech-prds.html"/>
<id>http://guirong.github.io/2014/11/tech-prds.html</id>
<published>2014-11-03T12:17:47.000Z</published>
<updated>2014-11-03T12:17:47.000Z</updated>
<content type="html"><![CDATA[<ol>
<li>数据线<ol>
<li><a href="http://www.bluelounge.com/products/kii/" target="_blank" rel="external">http://www.bluelounge.com/products/kii/</a></li>
<li><a href="http://www.hellonomad.com/products/nomadkey" target="_blank" rel="external">http://www.hellonomad.com/products/nomadkey</a></li>
<li><a href="http://popcord.co/" target="_blank" rel="external">http://popcord.co/</a></li>
<li><a href="https://www.indiegogo.com/projects/incharge-the-smallest-keyring-cable" target="_blank" rel="external">https://www.indiegogo.com/projects/incharge-the-smallest-keyring-cable</a></li>
</ol>
</li>
<li>追踪<ol>
<li><a href="http://www.nutspace.com/" target="_blank" rel="external">http://www.nutspace.com/</a></li>
</ol>
</li>
<li>闹钟<ol>
<li><a href="http://hex3.co/products/aclock-bluetooth-alarm-clock" target="_blank" rel="external">http://hex3.co/products/aclock-bluetooth-alarm-clock</a></li>
</ol>
</li>
<li>照明<ol>
<li>mr.beams <a href="http://detail.tmall.com/item.htm?spm=a220m.1000858.1000725.26.FRpus3&id=38619321284&skuId=47766009015&areaId=330100&cat_id=2&abbucket=7&rn=d2bf27eb661725dcd678fc318890484c&user_id=828120332&is_b=1" target="_blank" rel="external">http://detail.tmall.com/item.htm?spm=a220m.1000858.1000725.26.FRpus3&id=38619321284&skuId=47766009015&areaId=330100&cat_id=2&abbucket=7&rn=d2bf27eb661725dcd678fc318890484c&user_id=828120332&is_b=1</a></li>
</ol>
</li>
</ol>
]]></content>
<summary type="html">
<![CDATA[<ol>
<li>数据线<ol>
<li><a href="http://www.bluelounge.com/products/kii/" target="_blank" rel="external">http://www.bluelounge.com/products/kii]]>
</summary>
</entry>
<entry>
<title><![CDATA[viewport need to know]]></title>
<link href="http://guirong.github.io/2014/10/viewport.html"/>
<id>http://guirong.github.io/2014/10/viewport.html</id>
<published>2014-10-23T05:19:37.000Z</published>
<updated>2014-10-23T05:19:37.000Z</updated>
<content type="html"><![CDATA[<h2 id="visualviewport_vs_layoutviewport">visualviewport vs layoutviewport</h2>
<ol>
<li>layout ViewPort 用于布局，visual ViewPort 指可视窗口</li>
<li>页面缩放:<ol>
<li>layout ViewPort不变，但对应的物理像素变化了</li>
<li>visual ViewPort内的可视像素变化了(window.innerWidth/Height可获取)</li>
<li>layout ViewPort 超出 visual ViewPort 出现滚动条</li>
</ol>
</li>
<li>layout ViewPort 可通过 meta标签指定</li>
<li>devicePixelRatio?<a href="http://www.quirksmode.org/blog/archives/2012/07/more_about_devi.html" target="_blank" rel="external">http://www.quirksmode.org/blog/archives/2012/07/more_about_devi.html</a><ol>
<li>pc/mobile 不同？ <a href="https://code.google.com/p/chromium/issues/detail?id=177836" target="_blank" rel="external">https://code.google.com/p/chromium/issues/detail?id=177836</a></li>
</ol>
</li>
</ol>
<h2 id="参考">参考</h2>
<ol>
<li><a href="https://developer.apple.com/library/IOs/documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html" target="_blank" rel="external">apple 关于viewport的文档</a></li>
<li>viewport 探测：<a href="http://mqtest.io" target="_blank" rel="external">http://mqtest.io</a></li>
<li>viewport 数据：<ol>
<li><a href="http://screensiz.es" target="_blank" rel="external">http://screensiz.es</a></li>
<li><a href="http://viewportsizes.com" target="_blank" rel="external">http://viewportsizes.com</a></li>
<li><a href="http://mydevice.io/devices/" target="_blank" rel="external">http://mydevice.io/devices/</a></li>
<li><a href="http://www.canbike.org/CSSpixels/" target="_blank" rel="external">http://www.canbike.org/CSSpixels/</a></li>
<li><a href="http://i-skool.co.uk/mobile-development/web-design-for-mobiles-and-tablets-viewport-sizes/" target="_blank" rel="external">http://i-skool.co.uk/mobile-development/web-design-for-mobiles-and-tablets-viewport-sizes/</a></li>
</ol>
</li>
</ol>
]]></content>
<summary type="html">
<![CDATA[<h2 id="visualviewport_vs_layoutviewport">visualviewport vs layoutviewport</h2>
<ol>
<li>layout ViewPort 用于布局，visual ViewPort 指可视窗口</li>
<li]]>
</summary>
</entry>
<entry>
<title><![CDATA[fe references]]></title>
<link href="http://guirong.github.io/2014/10/fe-references.html"/>
<id>http://guirong.github.io/2014/10/fe-references.html</id>
<published>2014-10-22T08:29:58.000Z</published>
<updated>2014-10-22T08:29:58.000Z</updated>
<content type="html"><![CDATA[<h2 id="兼容性">兼容性</h2>
<ul>
<li><a href="http://caniuse.com/" target="_blank" rel="external">caniuse</a></li>
<li><a href="http://mobilehtml5.org/" target="_blank" rel="external">http://mobilehtml5.org/</a></li>
</ul>
<h2 id="mvc">mvc</h2>
<ul>
<li>[backbone]</li>
<li>auglarjs</li>
</ul>
<h2 id="mobile">mobile</h2>
<ul>
<li>cordova & phonegap</li>
<li><a href="http://www.webapps-online.com/online-tools/user-agent-strings/dv/" target="_blank" rel="external">http://www.webapps-online.com/online-tools/user-agent-strings/dv/</a></li>
<li>viewport 探测：<a href="http://mqtest.io" target="_blank" rel="external">http://mqtest.io</a></li>
<li>moible设备使用数据：<a href="http://www.umindex.com/" target="_blank" rel="external">http://www.umindex.com/</a></li>
</ul>
<h2 id="tools">tools</h2>
<ul>
<li><a href="http://www.charlesproxy.com/download/" target="_blank" rel="external">charles</a> http proxy</li>
<li><a href="http://wireshark.org/" target="_blank" rel="external">wireshark</a> network packet analyzer</li>
</ul>
]]></content>
<summary type="html">
<![CDATA[<h2 id="兼容性">兼容性</h2>
<ul>
<li><a href="http://caniuse.com/" target="_blank" rel="external">caniuse</a></li>
<li><a href="http://mobilehtml5]]>
</summary>
<category term="references" scheme="http://guirong.github.io/tags/references/"/>
<category term="tools" scheme="http://guirong.github.io/tags/tools/"/>
</entry>
<entry>
<title><![CDATA[跨终端实践-天猫试戴的解决方案]]></title>
<link href="http://guirong.github.io/2014/10/crossend-tmalltry.html"/>
<id>http://guirong.github.io/2014/10/crossend-tmalltry.html</id>
<published>2014-10-22T04:00:39.000Z</published>
<updated>2014-10-22T04:00:39.000Z</updated>
<content type="html"><![CDATA[<p>请先扫码体验(天猫app体验最佳)：<a target="_blank" href="http://gtms01.alicdn.com/tps/i1/TB1MuH0FVXXXXa_XFXXUvtM3pXX-540-548.png"><img src="http://gtms01.alicdn.com/tps/i1/TB1MuH0FVXXXXa_XFXXUvtM3pXX-540-548.png" style="width:20px;"></a></p>
<p><img src="http://gtms03.alicdn.com/tps/i3/TB1gyk_FFXXXXaiapXXa6gN9XXX-660-990.jpg" style="max-width:660px;width:260px"></p>
<p>体验完产品，具体讲下技术实现方案，整体的实现过程可以分为：</p>
<p><code>拍照->获得图片数据->将商品与图片合成->生成效果图->用户保存图片</code></p>
<h3 id="拍照">拍照</h3>
<h4 id="跨终端调取摄像头">跨终端调取摄像头</h4>
<p>这是试戴的关键一步，考虑到需要支持到各个终端，所以优先想到使用标准的web方案来实现：WebRTC-<code>getUserMedia</code></p>
<p>基于getUserMedia，面向mobile 快速尝试，基本完成了主要的功能</p>
<p>但getUserMedia的支持情况并不理想，尤其是sarfari的不支持让广大ios/mac用户无法体验，这里就需要PC、mobile的兼容处理，以跨终端<a href="http://static.lukew.com/MobileFirst_LukeW.pdf" target="_blank" rel="external">mobile first</a>及<a href="http://ued.taobao.org/blog/2008/10/understanding-progressiveen-hancement-chs-translation/" target="_blank" rel="external">优雅退化</a>的思路设计兼容API：</p>
<ol>
<li>在浏览器中如果无法支持，将采用flash方案补齐</li>
<li>在native中，优先采用native api 补齐</li>
</ol>
<p><img src="http://gtms02.alicdn.com/tps/i2/TB1UCm7FVXXXXaOXVXX0EopGFXX-912-422.png" width="660"></p>
<h4 id="控制前后摄像头（web）">控制前后摄像头（web）</h4>
<p>对于戒指的试戴，手机上我们期望优先调用后置摄像头，在web中启动时就需要设置优先后置摄像头，<a href="http://dev.w3.org/2011/webrtc/editor/getusermedia.html#widl-MediaTrackConstraintSet-sourceId" target="_blank" rel="external">W3C文档</a>还处于Draft阶段，相对还不是特别完善，可以通过如下设置：</p>
<figure class="highlight"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div></pre></td><td class="code"><pre><div class="line">{</div><div class="line"> video:{</div><div class="line"> optional: [</div><div class="line"> {</div><div class="line"> sourceId: $sourceId</div><div class="line"> }</div><div class="line"> ]</div><div class="line"> }</div><div class="line">}</div></pre></td></tr></table></figure>
<p>通过<code>MediaStreamTrack.getSources</code>可获得设备的所有sourceId，注意：考虑设备可能没有外设如台式机或外设设备不可用(在虚拟机或远程)，这种情况下会报错，所以需要try&catach容错。</p>
<h4 id="控制拍照时图片尺寸(web)">控制拍照时图片尺寸(web)</h4>
<p>不同的终端，摄像头拍摄的图片照片尺寸是不同的，如果我们只需要获得某一部分图像，就需要对图像做剪裁，在WEB中为了不引起用户疑惑，展现给用户拍照界面时，所见最好就是所需要的部分</p>
<p>举个栗子：我们期望获得一个正方形的图片，但是rmbp中摄像原始是16：9的图像，考虑方案有：</p>
<ol>
<li>考虑设置video的width/height 让图像自动充满video(参考官方文档并没有规定这部分实现，最新草案也无方向，这个方案走不通)</li>
<li>将video部分隐藏，知道目前图像的原始尺寸，然后垂直居中，方式如图：</li>
</ol>
<p><img src="http://gtms03.alicdn.com/tps/i3/TB1owqyFVXXXXcBaXXXwRYt9XXX-660-342.png" alt=""></p>
<p>需要注意的是：video API中有 videoHeight及videoWidth两个属性，当video play时理论这两个属性就是当前图像的宽高，但实际情况<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=926753" target="_blank" rel="external">Mozilla存在一个bug#926753</a>，play时仍无法准确获取，兼容的方案轮训监听：</p>
<figure class="highlight"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div></pre></td><td class="code"><pre><div class="line">Event.on(video,<span class="string">"play"</span>,<span class="function"><span class="keyword">function</span><span class="params">()</span></span>{</div><div class="line"> <span class="keyword">if</span>(<span class="keyword">this</span>.videoHeight===<span class="number">0</span>){</div><div class="line"> <span class="keyword">return</span> S.later(<span class="built_in">arguments</span>.callee,<span class="number">100</span>,<span class="literal">false</span>,<span class="keyword">this</span>);</div><div class="line"> }</div><div class="line"> <span class="comment">// now width/height ok</span></div><div class="line">}</div></pre></td></tr></table></figure>
<h3 id="获取数据：_在传输大数据情况下的web与native通讯">获取数据： 在传输大数据情况下的web与native通讯</h3>
<p>在拍照完成native中需要把图片数据传递给web，另外用户保存图片到本地时，web又需要把合成好的图片数据传递给native让其保存，这边涉及native与web的传递大数据通讯：</p>
<ol>
<li>native -> web: <ol>
<li>android：可通过<code>WebView#addJavascriptInterface()</code>向web注入js方法 ,</li>
<li>ios：可通过<code>UIWebView#stringByEvaluatingJavaScriptFromString()</code>执行js函数，两种方式向web传递大数据都没有问题</li>
</ol>
</li>
<li>web -> native: <ol>
<li>android：由于可以把native类暴露给web，js可以调用暴露的方法和native通讯，大数据也没问题；</li>
<li>ios：由于是采用UIWebViewDelegate方式，监控request方式通信，js通过自定义协议的URL用iframe请求，传输大量数据时便存在问题；解决这个问题方案：既然native可以和web顺畅通信，就可以通知native一个js 函数名，让native自己来取。</li>
</ol>
</li>
</ol>
<p><img src="http://gtms02.alicdn.com/tps/i2/TB1kljdFVXXXXawaXXX5tMtNFXX-608-408.jpg" width="660"></p>
<h3 id="合成展现：定位戒指位置">合成展现：定位戒指位置</h3>
<p>比较简单，用图片说明: <code>picWidth/maskWidth = x1/x = w1/w</code><br><img src="http://gtms04.alicdn.com/tps/i4/TB1Psa_FVXXXXcOXFXX4oiYGpXX-670-415.jpg" width="660"></p>
<h3 id="生成图片：Canvas图片跨域">生成图片：Canvas图片跨域</h3>
<p>知道了具体位置，生成图片便可以简单的调用 <code>canvas.toDataURL</code>获得图片数据，但这里涉及一个图片跨域问题：<br>Canvas获取图片数据会有跨域的限制，之前有：<a href="http://gallery.kissyui.com/imgProxy/1.0/guide/index.html" target="_blank" rel="external">imageProxy</a> flash来做代理的方案，但是这个方案仍然不够高效和简洁，尤其是对于mobile更无能为力</p>
<p>最好的方案是web标准的CORS，通过让服务器返回allow-origin的header，让canvas可以正常处理：</p>
<figure class="highlight"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div></pre></td><td class="code"><pre><div class="line"><span class="comment">// http response header: Access-Control-Allow-Origin: *</span></div><div class="line"></div><div class="line">img.crossOrigin = <span class="string">"Anonymous"</span>;</div><div class="line">img.onload = <span class="function"><span class="keyword">function</span><span class="params">()</span> </span>{ </div><div class="line"> ctx.drawImage( img, <span class="number">0</span>, <span class="number">0</span> );</div><div class="line"> canvas.toDataURL(<span class="string">"image/png"</span>);</div><div class="line">}</div></pre></td></tr></table></figure>
<h3 id="组件化&Mobile_First">组件化&Mobile First</h3>
<p>在整个开发的过程中是以组件化的思路分层处理，并封装成了具体的组件，通过封装的组件，后续拍照、试戴可以快速搭建完成，除了天猫自身业务特色的组件外，比较通用的有：</p>
<ol>
<li>camera组件: 底层跨终端拍照组件，后续会移植到阿里HybirdAPI一部分</li>
<li>try组件: 上层的试戴组件，处理图片位置、合并、移动旋转等，可配置不同模板及参数快速支持其他类型试戴（如眼镜）</li>
</ol>
<p>再设计跨终端有组件时，经验是优先面向mobile设计，这样逻辑及交互流程更加简洁，可以让API涉及更加清晰，后续正对PC适当兼容。</p>
<h3 id="聊业务">聊业务</h3>
<p>最后简单聊下这个业务：这是一个技术驱动业务的项目，从初期的业务重点在频道，中间经历几次业务调整，到目前把试戴作为业务后续的重点，可以说这个产品在其中起到了很多的作用，其中几点经验：</p>
<ol>
<li>不仅自己看到价值，重要让合作伙伴也看到价值<ol>
<li>在资源有限的情况下，作为技术人员去影响业务策略是不易的，认同事情的价值是关键一步</li>
</ol>
</li>
<li>快速的产出demo，验证可行性及让合作伙伴了解成本及效果<ol>
<li>有时不是业务看不到方向而是担心成本，这是技术的优势，但需要做出来看</li>
</ol>
</li>
</ol>
<h3 id="后续">后续</h3>
<p>后续试戴还有很多地方可以发力，比较重要的一些方向：</p>
<ol>
<li>支持更多品类：项链、眼镜、耳环、手镯、手表等其他类目</li>
<li>可以考虑结合图像搜索做相关推荐</li>
<li>尝试使用图像识别，减少已有模板对比的成本，<a href="http://mtschirs.github.io/js-objectdetect/examples/example_sunglasses_jquery.htm" target="_blank" rel="external">example</a></li>
<li>牛逼的3d眼睛试戴:<a href="http://www.direct-optic.fr/essai-virtuel-lunettes-troisd/" target="_blank" rel="external">http://www.direct-optic.fr/essai-virtuel-lunettes-troisd/</a></li>
</ol>
<h3 id="附">附</h3>
<ol>
<li><a href="http://www.html5rocks.com/zh/tutorials/video/basics/" target="_blank" rel="external">html5 vedio 简介</a></li>
<li><a href="http://www.html5rocks.com/en/tutorials/getusermedia/intro/" target="_blank" rel="external">Capturing Audio & Video in HTML5</a></li>
<li><a href="http://caniuse.com/#feat=stream" target="_blank" rel="external">getUserMedia兼容性</a></li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_enabled_image#What_is_a_.22tainted.22_canvas.3F" target="_blank" rel="external">tainted canvas</a></li>
<li><a href="http://wesbos.com/html5-video-face-detection-canvas-javascript/" target="_blank" rel="external">html5 video face detection</a></li>
<li><a href="http://caowenhao.sinaapp.com/" target="_blank" rel="external">html5 肤色检测</a></li>
</ol>
]]></content>
<summary type="html">
<![CDATA[<p>请先扫码体验(天猫app体验最佳)：<a target="_blank" href="http://gtms01.alicdn.com/tps/i1/TB1MuH0FVXXXXa_XFXXUvtM3pXX-540-548.png"><img src="http://gtms]]>
</summary>
<category term="crossend" scheme="http://guirong.github.io/tags/crossend/"/>
<category term="WebRTC" scheme="http://guirong.github.io/tags/WebRTC/"/>
</entry>
<entry>
<title><![CDATA[About Touch Icons]]></title>
<link href="http://guirong.github.io/2014/10/about-touch-icons.html"/>
<id>http://guirong.github.io/2014/10/about-touch-icons.html</id>
<published>2014-10-18T09:42:03.000Z</published>
<updated>2014-10-18T09:42:03.000Z</updated>
<content type="html"><![CDATA[<ol>
<li><a href="https://mathiasbynens.be/notes/touch-icons" target="_blank" rel="external">https://mathiasbynens.be/notes/touch-icons</a></li>
</ol>
]]></content>
<summary type="html">
<![CDATA[<ol>
<li><a href="https://mathiasbynens.be/notes/touch-icons" target="_blank" rel="external">https://mathiasbynens.be/notes/touch-icons</a><]]>
</summary>
<category term="mobile" scheme="http://guirong.github.io/tags/mobile/"/>
</entry>
<entry>
<title><![CDATA[Hello World]]></title>
<link href="http://guirong.github.io/2014/10/hello-world.html"/>
<id>http://guirong.github.io/2014/10/hello-world.html</id>
<published>2014-10-16T07:45:51.000Z</published>
<updated>2014-10-16T07:45:51.000Z</updated>
<content type="html"><![CDATA[<p>hello world!</p>
]]></content>
<summary type="html">
<![CDATA[<p>hello world!</p>
]]>
</summary>
<category term="hexo" scheme="http://guirong.github.io/tags/hexo/"/>
</entry>
</feed>