移动端---前端在安卓与ios上遇到的坑

最近一直在写移动端项目，遇到不少适配安卓与ios及其他的问题，现在进行一个回顾

先是要如何判断安卓与ios

var u = navigator. userAgent; var isAndroid = u. indexOf( 'Android') > - 1 || u. indexOf( 'Adr') > - 1; //android终端 var isiOS = !! u. match( /\(i[^ ;]+ ;( U;)? CPU.+ Mac OS X/); //ios终端 if ( isAndroid ) {} else if ( isiOS ) {}

1、使用input file调取摄像头与相册

< input type= "file" class= "input" id= "inputCamera" capture= "camera" >

①安卓调取相机

var a = document. getElementById( 'inputCamera') a. setAttribute( "accept", "image/*");

②安卓调取相册

var a = document. getElementById( 'inputPhoto') a. setAttribute( "capture", "camera");

③ios调取相机

var a = document. getElementById( 'inputCamera') a. setAttribute( "capture", "camera");

④ios调取相册

var a = document. getElementById( 'inputPhoto') a. setAttribute( "accept", "image/*");

2、input：同一张图片上传的时候，不走change事件（没有办法上传同一张照片）

解决办法：

给input父级的form class重置：

$( '._uploadimg_form2')[ 0]. reset()

3、对图片进行压缩：

var canvas = document. createElement( 'CANVAS'); var ctx = canvas. getContext( '2d'); var img = document. getElementById( 'imgPic'); //需要显示的img var imgNew = new Image(); imgNew.src = this.result; //该图片url是你要压缩的url
imgNew. onload = function() { var imgWidth = imgNew. width; var imgHeight = imgNew. height; var rate = 0.5 canvas. width = imgWidth * rate; canvas. height = imgHeight * rate; console. log( rate, canvas. width, canvas. height) ctx. drawImage( imgNew, 0, 0, imgWidth * rate, imgHeight * rate); var dataURL = canvas. toDataURL( 'image/png'); img. src = dataURL //给img赋值 }

未完待续。。。。。。

更多相关文章

随机推荐