m***@163.com
m***@163.com
  • 发布:2017-05-26 09:22
  • 更新:2017-05-27 08:51
  • 阅读:4636

怎么将<input capture="camera">拍摄照片保存到本地

分类:HTML5+

怎么将<input capture="camera">拍摄照片保存到本地

2017-05-26 09:22 负责人:无 分享
已邀请:
赵梦欢

赵梦欢 - 专注前端,乐于分享!

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开发工程化实践之路,欢迎前去围观。

m***@163.com

m***@163.com (作者)

使用5+ 的camera模块 有个问题请教一下:就是在iOS系统下拍摄照片保存之后,save()路径和pick()路径不一致,照片被移动到沙盒,所以使得拍摄照片不能通过URL立刻预览在页面上,请问有什么好的解决方法吗?

赵梦欢

赵梦欢 - 专注前端,乐于分享!

图片预览同样可以使用base64编码的

m***@163.com

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

m***@163.com (作者)

可是 相机拍摄之后 file 我却拿不到,请问 怎么拿到呢?

  • 赵梦欢

    http://www.html5plus.org/doc/zh_cn/io.html#plus.io.resolveLocalFileSystemURL

    2017-05-27 19:53

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