移动端---前端在安卓与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赋值

}

未完待续。。。。。。