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>