当我用以下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);
});
}
}
开拓者 (作者)
谢谢你的指导!那再请教下我该从哪去找到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