最近一直在写移动端项目,遇到不少适配安卓与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赋值
}
未完待续。。。。。。