HTML5 拍照应用开发经历的那些坑儿

// 读取图片数据 var fr = new FileReader(); fr.readAsDataURL(file); fr.onload = function(fe){ var result = this.result; var img = new Image(); var exif; img.onload = function() { var orientation = exif ? exif.Orientation : 1; // 判断拍照设备持有方向调整照片角度 switch(orientation) { case 3: imgRotation = 180; break; case 6: imgRotation = 90; break; case 8: imgRotation = 270; break; } }; // 转换二进制数据 var base64 = result.replace(/^.*?,/,''); var binary = atob(base64); var binaryData = new BinaryFile(binary); // 获取exif信息 exif = EXIF.readFromBinaryFile(binaryData); img.src = result; };

3.2、html2canvas问题重重
问题背景：
为什么要用html2canvas呢，因为我们需要将用户合成照片后的base64数据提交服务器，所以我们需要通过转换为canvas获取照片数据。
问题详情：
3.2.1、图片使用css3 transform旋转了图片方向，但最终html2canvas渲染结果却未保存旋转信息；
3.2.2、html2canvas的渲染起点为网页右上角，而且不能更改设置；
3.2.3、ios大图被压扁了。
问题解决：
但最终因为碰到太多无法绕过的问题，不得不放弃html2canvas的方案，全部转为canvas开发。

3.3、ios大图被压扁了
问题详情： 当照片超过2M时，ios会出现压扁的情况（如下图所示）

问题解决：
获取图片实际比例，重置图片的比例。（stack overflow讨论帖） 需要注意的是，ratio的获取是通过检测像素alpha，需要过滤png图片，这在stack overflow的讨论上没有人提出。
关键代码：

var getRatio = function(img) { if(/png$/i.test(img.src)) { return 1; } var iw = img.naturalWidth, ih = img.naturalHeight; var canvas = document.createElement('canvas'); canvas.width = 1; canvas.height = ih; var ctx = canvas.getContext('2d'); ctx.drawImage(img, 0, 0); var data = ctx.getImageData(0, 0, 1, ih).data; var sy = 0; var ey = ih; var py = ih; while (py > sy) { var alpha = data[(py - 1) * 4 + 3]; if (alpha === 0) { ey = py; } else { sy = py; } py = (ey + sy) >> 1; } var ratio = (py / ih); return (ratio===0)?1:ratio; }

3.4、照片太模糊啦，我想提高精度！
问题描述：

如上图所示，为了减少本地内存消耗，项目最初采用尺寸是320×270。在项目上线后，在确保内存占用不过高的情况下，开始尝试开发高清方案，测试地址如下：

在主流设备上测试，性能并无太大问题，但当网络切换为3g时，测试图片合并上传时间8-12s，是原来时间的3倍左右，于是测试了一下3g网络的上传速度：

_public.toDataURL = function(callback){ var self = this; // 去除编辑状态的元素 self.unSelect(); // 已测手机QQ浏览器canvas.toDataURL有问题，使用jeegEncoder window.setTimeout(function(){ var encoder = new JPEGEncoder(); var data = encoder.encode(self.canvas.getContext('2d').getImageData(0,0,self.stage.width,self.stage.height), 90); callback.call(self, data); }, 1000/self.config.fps) } 

3.6、当getElementOffset遇上transform
问题代码：

Quark.getElementOffset = function(elem) { var left = elem.offsetLeft, top = elem.offsetTop; while((elem = elem.offsetParent) && elem != document.body && elem != document) { left += elem.offsetLeft; top += elem.offsetTop; } return {left:left, top:top}; };

问题描述：
当目标元素的上级元素中有使用transform:translate(x,y)时，用如上的方法都会导致offset计算错误，这一bug在常用canvas框架EaseJS、QuarkJS，DOM类库Zepto中都存在。我项目中使用的是QuarkJS，碰到具体问题是舞台事件坐标不正确，由于是框架中的bug，足足花了半天时间才追查到。
问题解决：
offsetLeft或offsetTop需要减去translate的差值。