移动端使用file域调用手机摄像头拍照并上传到服务器

最近的一个小项目需要用到移动端调用手机摄像头拍照,经多方查找验证,最后选定用file域调用手机摄像头拍照,转成base64格式上传到服务器
最后找到了一个非常好用的插件,分享一波。
demo地址:拍照上传demo
html代码:

<div id="modalcamera">
    <input class="file" accept="image/*" capture="camera" multiple="multiple" type="file" name="" id="file">
</div>

accept="image/*" : 只接收图片
capture="camera" : 直接调用摄像头
插件地址:https://github.com/think2011/localResizeIMG
js代码:

//unbind:为了解决file域提交失败后,不清空数据的问题
$('#file').unbind().on('change', function () {
            lrz(this.files[0], {
                    width: 640
                })
                .then(function (rst) {
                    // 处理成功会执行
                    var output = rst.base64; //获取base64位图片信息      
                    // 数据流前22位是图片格式信息,不属于图片,需切除
                    var base64Data = output.substr(22);
                    console.log(base64Data)
                    // 将图片上传到服务器
                    //上传代码
                })
                .catch(function (err) {
                    // 处理失败会执行
                })
                .always(function () {
                    // 不管是成功失败,都会执行
                });
        })
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容