移动端怎么利用html5对照片处理

　　介绍

本文将为大家详细介绍”移动端怎么利用html5对照片处理”,内容步骤清晰详细,细节处理妥当,而小编每天都会更新不同的知识点,希望这篇“移动端怎么利用html5对照片处理”能够给你意想不到的收获,请大家跟着小编的思路慢慢深入,具体内容如下,一起去收获新知识吧。

html是什么

html的全称为超文本标记语言,它是一种标记语言,包含了一系列标签。通过这些标签可以将网络上的文档格式统一,使分散的互联网资源连接为一个逻辑整体,html文本是由html命令组成的描述性文本,html命令可以说明文字,图形,动画,声音,表格,链接等,主要和css + js配合使用并构建优雅的前端网页。

各种坑汇总

<李>

调取手机相册
iOS到没什么问题,安卓手机好坑啊,网上搜了很多办法,要么就是有的手机不管用,要么就是只能调相册不能调相机,要么就是只能调相机不能调相册

<李>

调取相册拿到相片后渲染到界面上,iOS又出了问题,通过相机拍摄的图片是旋转过90度的,或者苹果里面正常的图片到了安卓机展示是旋转90的,也有的图片苹果上正常在后台是歪的。身为一个iOS开发出身的我这就不理解了,经过几番查证,得出一个结论,苹果的相机是歪的!

<李>

图片渲染过后浏览器会崩溃,尤其是在微信,不得不说,微信好坑啊,什么东西到微信上就会出现各种问题!

<李>

然后是图片上传的问题,一开始采用了文件上传的形式,后来结果测试反馈,很多安卓机不能上传成功!说多了都是泪,不多说进正题!

调取手机相册和相机

采用类推调取相册虽然是一句话从网页调取,但是如果想相册,相机都调的话要这么写(我真的是查了好久)

& lt; form  id=皍ploadForm", enctype=岸嗖糠?form-data"比; 　　,,& lt; input 类=皍pload-open-photo",接受=巴枷?*“,类型=癴ile", id=癴ilechooser", v:改变=癰tnUploadFile(事件)美元“/比; 　　& lt;/form>

图片渲染

图片渲染我采用了画布,利用了一个叫exif。js的插件获取一下手机拍摄的方向(也就是拍照时是竖着拿手机还是横着,),然后判断下设备,对iOS设备的三个方向对图片进行旋转,利用帆布画到画布上

btnUploadFile (e) { 　　,,,,,//获取图片 　　,,,,,var , self =,; 　　,,,,,var  filechooser =, . getelementbyid (& # 39; filechooser& # 39;); 　　,,,,,var  previewer =, . getelementbyid (& # 39; previewer # 39;); 　　,,,,,var  that =, e。target; 　　,,,,,var  files =, that.files; 　　,,,,,var  file =,文件[0]; 　　,,,,,//判断拍摄方向, 　　,,,,,,EXIF.getData(文件,函数(){ 　　,,,,,,,,,,,self.orientation=EXIF.getTag(这个,& # 39;方向# 39;); 　　,,,,,,}); 　　,,,,,self.fileData =,文件; 　　,,,,,,//,接受,jpeg, jpg,, png 类型的图片 　　,,,,,,if  (!/\/(?: jpeg | jpg | png)/信息技术(file.type)) { 　　,,,,,,,,,,,,返回; 　　,,,,,} 　　,,,,,var  reader =, new  FileReader (); 　　,,,,reader.onload =,()函数,{ 　　,,,,,,,,,var  result =, this.result; 　　,,,,,,,,,var  img =,, new 图像(); 　　,,,,,,,,//进行图片的渲染 　　,,,,,,,,,,img.onload =,()函数,{ 　　,,,,,,,,,,,,,,,//图片旋转压缩处理后的base64 　　,,,,,,,,,,,,,,,var  compressedDataUrl =self.compress (img, self.fileData.type); 　　,,,,,,,,,,,,,,//渲染到img标签上 　　,,,,,,,,,,,,,,,self.toPreviewer (compressedDataUrl); 　　,,,,,,,,,,,,,,img =,空; 　　,,,,,,,,,,}; 　　,,,,,,,,img.src =,结果; 　　,,,,,}; 　　,,,,,reader.readAsDataURL (self.fileData); 　　},

图片渲染

图片渲染时不但要把图片旋转,还要进行压缩,由于现在相机像素太高,高清图片会导致浏览器崩溃,当然如果是做的微信开发,只需要在微信浏览器中适配,那么可以参考微信jssdk中的调用相册的方法,这样就不会有图歪和崩溃的问题了。当然如果不是只做微信,我们还是要进行压缩,同样是采用帆布
(mp.weixin.qq.com/wiki/7/aaa137b55fb2e0456bf8dd9148dd613f.html)

//对图片进行旋转,压缩的方法,最终返回base64 ,渲染给img标签的src 　　压缩(img,文件类型),{ 　　,,,,,var 学位=0,drawWidth, drawHeight,宽度,高度; 　　,,,,,drawWidth=img.width; 　　,,,,,drawHeight=img.height; 　　,,,,,//以下改变一下图片大小 　　,,,,var  maxSide =, Math.max (drawHeight drawWidth也); 　　,,,,if  (maxSide 祝辞,1024),{ 　　,,,,,,,,,,var  minSide =, Math.min (drawHeight drawWidth也); 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null

移动端怎么利用html5对照片处理