canvas教程

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

字号+ 作者:H5之家 来源:H5之家 2017-04-09 18:05 我要评论( )

TGideas隶属于腾讯公司互动娱乐业务系统的专业推广类设计团队,工作范围涉及各类游戏产品的推广设计工作,由专业的视觉设计师、网站重构工程师、FLASH动画设计师

一、项目简介

1.1、项目背景:
这是一个在移动终端创新应用的项目,用户在浏览器端(微信/手Q)即可完成与金秀贤的合影,希望通过这样一种趣味体验,引发用户的分享与转发的热潮。

1.2、系统要求:
ios6-ios7、android3.0-android4.3、android4.4+(非webview内)

1.3、体验地址:

二、初步技术方案确定

在项目前期首先启动了技术预演,确定初步技术方案(*非最终解决方案):

2.1、获取用户照片数据
2.1.1、首先放弃了主动获取用户摄像头的getUserMedia,因为移动终端支持率太低;
2.1.2、确定使用Input控件获取照片文件、使用FileReader读取照片数据,android3.0+、ios6.0+都可以支持。

2.2、编辑合成照片
2.2.1、放弃使用canvas编辑(即将图像数据读取到canvas内进行处理)照片,考虑到开发成本成高;
2.2.2、选用dom编辑(img标签),然后使用html2canvas,方便保存数据。

2.3、保存并上传照片
确定使用canvas的toDataURL接口,提交base64数据到服务器。

三、碰到的那些坑儿

按照既定的技术方案开始执行,开始碰到一个个问题,有些问题可以绕过,有些问题只能推倒重来。

3.1、照片方向反了(如下图所示)


问题描述:
手持设备不同方向所拍摄的照片方向不同,照片的方向都会不同,但相册中会自动纠正,这一问题在ios和android中都存在。
问题解决:
3.1.1、将图片数据转换成二进制数据,方便获取图片的exif信息;(这里我引入了 Binary Ajax)
3.1.2、获取图片的exif信息;(这里我使用了 Javascript EXIF Reader)
3.1.3、通过图片exif信息,获取图片拍摄时所持设备方向orientation。
关键代码:

// 读取图片数据 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、照片太模糊啦,我想提高精度!
问题描述:


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


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

 

 

下载速度

上传速度

联通3g

220kb/s

80kb/s

电信3g

180kb/s

60kb/s

移动3g

100kb/s

13kb/s

移动2g

15kb/s

12kb/s

平常会留意用户的下载速度,但对上传速度没太在意,640x540图片的base64数据大小为120kb左右,加上延时,3g环境下平均上传时间是5s左右。于是,上传速度成为了高清方案的瓶颈。

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • 网页设计中html和html5语言的区别?

    网页设计中html和html5语言的区别?

    2017-04-06 13:01

  • 众创缘 web前端开发,ui设计,seo,网络营销互联网技术学习网站

    众创缘 web前端开发,ui设计,seo,网络营销互联网技术学习网站

    2017-03-29 14:00

  • 设计师毕业实习报告范文3篇

    设计师毕业实习报告范文3篇

    2017-03-27 15:00

  • 网页设计师必看的30个HTML5学习网站

    网页设计师必看的30个HTML5学习网站

    2017-03-25 18:03

网友点评