input file标签拍照首先兼容性不好,只是部分浏览器支持,有存在不支持的情况,如果是做App,还是推荐使用5+ 的camera模块。
不过就楼主提的问题也是有办法的,主要是使用h5的File API,基本思路拍完照可以将图片读取成base64,然后将将DataURI对象转blob对象,最后下载:
FileReader 通过 readAsDataURL读取为base64:
var reader = new FileReader();
reader.onload = function() {
console.log(this.result);
}
reader.readAsDataURL(file);
DataURI对象转blob对象:
/**
* dataURI 转 blob
* @param {Object} dataURI
*/
function dataURItoBlob(dataURI) {
var arr = dataURI.split(','), mime = arr[0].match(/:(.*?);/)[1],
bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
while(n--){
u8arr[n] = bstr.charCodeAt(n);
}
return new Blob([u8arr], {type:mime});
}
下载文件:
<a id="aLink">下载</a>
<script type="text/javascript">
function downloadFile (el, fileName, content) {
var aLink = document.querySelector(el);
var blob = new Blob([content]);
aLink.download = fileName;
aLink.href = URL.createObjectURL(blob);
}
document.querySelector('#aLink').addEventListener('click',function () {
downloadFile('#aLink', 'hello.txt', '<h1>hello world</h1>');
})
</script>
如果需要自动下载,可以看看document.createEven或者mui.fire触发事件。
具体可以看看:JavaScript进阶学习(三)—— 基于html5 File API的文件操作
近期我在segmentfault开了一个讲座html5 App开发工程化实践之路,欢迎前去围观。
5 个回复
赵梦欢 - 专注前端,乐于分享!
input file标签拍照首先兼容性不好,只是部分浏览器支持,有存在不支持的情况,如果是做App,还是推荐使用5+ 的camera模块。
不过就楼主提的问题也是有办法的,主要是使用h5的File API,基本思路拍完照可以将图片读取成base64,然后将将DataURI对象转blob对象,最后下载:
FileReader 通过 readAsDataURL读取为base64:
DataURI对象转blob对象:
下载文件:
如果需要自动下载,可以看看document.createEven或者mui.fire触发事件。
具体可以看看:JavaScript进阶学习(三)—— 基于html5 File API的文件操作
近期我在segmentfault开了一个讲座html5 App开发工程化实践之路,欢迎前去围观。
m***@163.com (作者)
使用5+ 的camera模块 有个问题请教一下:就是在iOS系统下拍摄照片保存之后,save()路径和pick()路径不一致,照片被移动到沙盒,所以使得拍摄照片不能通过URL立刻预览在页面上,请问有什么好的解决方法吗?
赵梦欢 - 专注前端,乐于分享!
图片预览同样可以使用base64编码的
m***@163.com (作者)
这个...basse64编码 怎么转可以讲下吗 刚入行不久 小白一个 哈哈
赵梦欢
http://www.html5plus.org/doc/zh_cn/io.html#plus.io.FileReader.readAsDataURL
2017-05-26 20:01
m***@163.com (作者)
回复 赵梦欢:除了能拿到 input 中的file 别的标签怎么拿到 因为input tpye=file兼容性不是很好
2017-05-27 08:55
m***@163.com (作者)
OK了 谢谢你啊
2017-05-27 09:37
m***@163.com (作者)
可是 相机拍摄之后 file 我却拿不到,请问 怎么拿到呢?
赵梦欢
http://www.html5plus.org/doc/zh_cn/io.html#plus.io.resolveLocalFileSystemURL
2017-05-27 19:53