开拓者
开拓者
  • 发布:2018-05-20 20:40
  • 更新:2018-05-21 09:45
  • 阅读:1830

HTML5的拍照在android手机上的问题

分类:HTML5+

当我用以下HTML5代码实现拍照显示的时候,发现在苹果手机(iOS系统)上没问题,但是在Android手机上只能显示相册,而不能直接拍照,求解!!

页面文件上使用:
<input type='file' accept='image/*' id='uploadImage' style='display:none' capture='camera' onchange="selectFileImage(this);" />

在JS文件上的实现:
function selectFileImage(fileObj) {
var file = fileObj.files['0'];
var Orientation = null;
if (file) {
var rFilter = /^(image\/jpeg|image\/png)$/i; // 检查图片格式
if (!rFilter.test(file.type)) {
return;
}
//获取照片方向角属性,用户旋转控制
EXIF.getData(file, function() {
//alert(EXIF.pretty(this));
EXIF.getAllTags(this);
Orientation = EXIF.getTag(this, 'Orientation');
var oReader = new FileReader();
oReader.onload = function(e) {
var image = new Image();
image.src = e.target.result;
image.onload = function() {
var expectWidth = this.naturalWidth;
var expectHeight = this.naturalHeight;
expectWidth = 800;
expectHeight = expectWidth * this.naturalHeight / this.naturalWidth;
var canvas = document.getElementById("mycanvas");
var ctx = canvas.getContext("2d");
canvas.width = expectWidth;
canvas.height = expectHeight;
ctx.drawImage(this, 0, 0, expectWidth, expectHeight);
var base64 = null;
var mpImg = new MegaPixImage(image);
mpImg.render(canvas, {
maxWidth: expectWidth,
maxHeight: expectHeight,
quality: 0.8,
orientation: Orientation
});
base64 = canvas.toDataURL("image/jpeg", 0.8);
var num=$("#inputphotodiv").children("img").length+1;
$("#inputphotodiv").append("<img id='inputphoto"+"' style='width:33%' src='a' class='photo' />");
$("#inputphoto").attr("src", base64);
};
};
oReader.readAsDataURL(file);
});
}
}

2018-05-20 20:40 负责人:无 分享
已邀请:
W小姐

W小姐

如果直接使用input[type = file]的话,就是跟浏览器有关系,你并没有用到dcloud给你提供的插件

  • 开拓者 (作者)

    谢谢你的指导!那再请教下我该从哪去找到dcloud提供的插件?

    2018-05-21 11:30

  • W小姐

    回复 开拓者:你都到这个网站来了,看一下文档有那么难?

    2018-05-22 10:04

  • 开拓者 (作者)

    如果你指的是plus.camera的话,那早试过了,就是还卡在如何解决照片旋转了90度的问题,哎,Hbuilder要是能进一步打包解决掉大家碰到过的共性问题就好了。谢谢你的回复!

    2018-05-22 13:13

  • W小姐

    这个我并没有去干预旋转,并不是所有照片都会旋转90度,横着拍,或者平着拍可以出现横着的图片,那就让它横着呗,有可以客户就是想横着拍呢

    2018-05-22 15:43

该问题目前已经被锁定, 无法添加新回复