HTML调用手机拍照功能

经过多方验证,基于HTML是可以直接调用手机拍照,不过~~~,当然是有问题了,由于微信默认浏览器被阉割的严重,它只能使用拍照功能,不能上传文件(微信太淘气了~~~),真让人汗颜。方法非常简单,只要一句话:

<input id="mypic" name="mypic" accept="image/*" type="file" />

这是我的代码区域(HTML 部分):

<!-- 图片上传区 -->
<div id="upload-container" class="col-xs-12 text-center">
<input id="mypic" name="mypic" accept="image/*" type="file" />
<div class="imglist" id="imglist">
<!-- 动态加载图片 -->
<div class="col-sm-6" id="col-sm-6">
</div>
</div>
</div>

我把所有可能的问题也说一下吧:

(1)微信拍照好用,上传文件不好用;

(2)其它浏览器拍照好用,上传文件也好用。

下一个问题来了,如果你想把图片显示在界面上,那就灰常麻烦了,之前用了H5的功能,使用的框架,不能获得图片并上传到后台,所以放弃了,只能嵌入js,将图片以流的形式显示在页面上,代码上来了:

<!-- 实现照片的动态加载 -->
<script type="text/javascript">
var input = document.querySelector('input[type=file]');
input.onchange = function () {
var file = input.files[0];

drawOnCanvas(file);
displayAsImage(file);
};

function drawOnCanvas(file) {
var reader = new FileReader();

reader.onload = function (e) {
var dataURL = e.target.result,
c = document.querySelector('canvas'),
ctx = c.getContext('2d'),
img = new Image();

img.onload = function() {
c.width = img.width;
c.height = img.height;
ctx.drawImage(img, 0, 0);
};

img.src = dataURL;
};

reader.readAsDataURL(file);
}

function displayAsImage(file) {
var imgURL = URL.createObjectURL(file),
img = document.createElement('img');

img.onload = function() {
URL.revokeObjectURL(imgURL);
};

// 设置显示的图片大小
img.name = 'myimg';
img.width = 200;
img.src = imgURL;

// 设置在col-sm-6中添加图片内容img
//document.body.appendChild(img);
document.querySelector('#col-sm-6').appendChild(img);
}

</script>
转载请附上原文出处链接及本声明
李老师的博客 » HTML调用手机拍照功能

发表评论

提供最优质的文章集合

立即查看 了解详情