【Demo】HTML5 拍照上傳

本文主要講解 手機瀏覽器 如何拍照

為什么會有這個需求

最近做一個項目要用到拍照然后上傳照片,但是網頁拍照一般都是用Flash做的,而我們主要是H5頁面,如果在微信里面有權限就可以通過JSSDK調起攝像頭拍照的。這里我們主要說下手機端瀏覽器如何調起攝像頭

H5如何打開攝像頭

不需要特別的支持,只需要一行代碼就可以了

<input id="upload" type="file" accept="image/*;" capture="camera" >

如何預覽圖

原理是用js獲取input file的圖像流,然后賦給img標簽的src屬性,然后再設置這個img的css,就能得到你要的效果了,代碼如下

;
var demo_h5_upload_ops = {
    init:function(){
        this.eventBind();
    },
    eventBind:function(){
        var that = this;
        $("#upload").change(function(){
            var reader = new FileReader();
            reader.onload = function (e) {
                that.compress(this.result);
            };
            reader.readAsDataURL(this.files[0]);
        });
    },
    compress : function (res) {
        var that = this;
        var img = new Image(),
            maxH = 300;

        img.onload = function () {
            var cvs = document.createElement('canvas'),
                ctx = cvs.getContext('2d');

            if(img.height > maxH) {
                img.width *= maxH / img.height;
                img.height = maxH;
            }
            cvs.width = img.width;
            cvs.height = img.height;

            ctx.clearRect(0, 0, cvs.width, cvs.height);
            ctx.drawImage(img, 0, 0, img.width, img.height);
            var dataUrl = cvs.toDataURL('image/jpeg', 1);
            $(".img_wrap").attr("src",dataUrl);
            $(".img_wrap").show();
            // 上傳略
            that.upload( dataUrl );
        };

        img.src = res;
    },
    upload:function( image_data ){
        /*這里寫上次方法,圖片流是base64_encode的*/
    }
};


$(document).ready( function(){
    demo_h5_upload_ops.init();
} );

實例演示

地址:http://m.54php.cn/demo/h5_upload   也可以手機掃描下圖


測試結果報告

手機 UC瀏覽器 微信
IOS

支持拍照上傳

支持圖庫選擇上上傳

支持拍照上傳

支持圖庫選擇上傳

Android

支持拍照上傳

支持圖庫選擇上傳

不支持拍照上傳

支持圖庫選擇上傳

效果圖

本人IOS 系統 親自測試了UC瀏覽器和微信自帶瀏覽器 完美兼容



<蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <文本链> <文本链> <文本链> <文本链> <文本链> <文本链>