原文 https://github.com/tmallfe/tmallfe.github.io/issues/4javascript
体验完产品,具体讲下技术实现方案,总体的实现过程能够分为:html
拍照->得到图片数据->将商品与图片合成->生成效果图->用户保存图片html5
跨终端调取摄像头java
这是试戴的关键一步,考虑到须要支持到各个终端,因此优先想到使用标准的web方案来实现:WebRTC - getUserMedia
jquery
基于 getUserMedia,面向 mobile 快速尝试,基本完成了主要的功能android
但 getUserMedia 的支持状况并不理想,尤为是 sarfari 的不支持让广大 ios/mac 用户没法体验,这里就须要 PC、mobile 的兼容处理,以跨终端 mobile first 及优雅退化的思路设计兼容API:ios
控制先后摄像头(web)git
对于戒指的试戴,手机上咱们指望优先调用后置摄像头,在 web 中启动时就须要设置优前后置摄像头,W3C 文档还处于 Draft 阶段,相对还不是特别完善,能够经过以下设置:github
{ video:{ optional: [ { sourceId: $sourceId } ] } }
经过 MediaStreamTrack.getSources
可得到设备的全部 sourceId,注意:考虑设备可能没有外设如台式机或外设设备不可用(在虚拟机或远程),这种状况下会报错,因此须要 try&catach 容错。web
控制拍照时图片尺寸(web)
不一样的终端,摄像头拍摄的图片照片尺寸是不一样的,若是咱们只须要得到某一部分图像,就须要对图像作剪裁,在 WEB 中为了避免引发用户疑惑,展示给用户拍照界面时,所见最好就是所须要的部分
举个栗子:咱们指望得到一个正方形的图片,可是 rmbp 中摄像原始是 16:9 的图像,考虑方案有:
须要注意的是:video API 中有 videoHeight 及 videoWidth 两个属性,当 video play 时理论这两个属性就是当前图像的宽高,但实际状况 Mozilla 存在一个 bug#926753,play 时仍没法准确获取,兼容的方案轮训监听:
Event.on(video,"play",function(){ if(this.videoHeight===0){ return S.later(arguments.callee,100,false,this); } // now width/height ok }
在拍照完成 native 中须要把图片数据传递给 web,另外用户保存图片到本地时,web 又须要把合成好的图片数据传递给 native 让其保存,这边涉及 native 与 web 的传递大数据通信:
WebView#addJavascriptInterface()
向 web 注入 js 方法UIWebView#stringByEvaluatingJavaScriptFromString()
执行 js 函数,两种方式向 web 传递大数据都没有问题比较简单,用图片说明: picWidth/maskWidth = x1/x = w1/w
知道了具体位置,生成图片即可以简单的调用 canvas.toDataURL
得到图片数据,但这里涉及一个图片跨域问题:
Canvas 获取图片数据会有跨域的限制,以前有:imageProxy flash来作代理的方案,可是这个方案仍然不够高效和简洁,尤为是对于 mobile 更无能为力
最好的方案是 web 标准的 CORS,经过让服务器返回 allow-origin 的 header,让 canvas 能够正常处理:
// http response header: Access-Control-Allow-Origin: * img.crossOrigin = "Anonymous"; img.onload = function() { ctx.drawImage( img, 0, 0 ); canvas.toDataURL("image/png"); }
在整个开发的过程当中是以组件化的思路分层处理,并封装成了具体的组件,经过封装的组件,后续拍照、试戴能够快速搭建完成,除了天猫自身业务特点的组件外,比较通用的有:
再设计跨终端有组件时,经验是优先面向 mobile 设计,这样逻辑及交互流程更加简洁,可让 API 涉及更加清晰,后续正对 PC 适当兼容。
最后简单聊下这个业务:这是一个技术驱动业务的项目,从初期的业务重点在频道,中间经历几回业务调整,到目前把试戴做为业务后续的重点,能够说这个产品在其中起到了不少的做用,其中几点经验:
后续试戴还有不少地方能够发力,比较重要的一些方向: