手機瀏覽器拍照兼容

項目中一個功能是拍照上傳,開始想着不是很簡單嗎?不就是html

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

可是因爲目前作的是混合app,在ios下是能夠正常拍照的,安卓用扣扣,UC各類瀏覽器打開也都沒問題,然而安卓一旦脫離這些瀏覽器,就只能選擇相冊中的照片不能拍照了ios

網上找了一堆input的兼容,可是都沒有效果 瀏覽器

後來找到了:http://www.html5plus.org/doc/zh_cn/camera.htmlapp

上代碼:測試

拍照:ui

getCamera(e){
                var that=this
                plus.camera.getCamera().captureImage(function(e){
                    console.log(e);
                    plus.io.resolveLocalFileSystemURL(e, function(entry) {
                        var path = entry.toLocalURL();
                        document.getElementById("pic").src = path;
                       
                    }, function(e) {
//                        mui.toast("讀取拍照文件錯誤:" + e.message);
                    });

                });
            },

相冊獲取圖片:this

album(){
                var that=this
                plus.gallery.pick(function(path){
                    plus.io.resolveLocalFileSystemURL(path, function(entry) {
                        var path = entry.toLocalURL();
                        document.getElementById("pic").src = path;
                      
                       
                    }, function(e) {
//                        mui.toast("讀取拍照文件錯誤:" + e.message);
                    });
                });
            },

上傳:url

 upload(src){
                //服務端接口路徑
                var that=this
               
                //獲取圖片元素
//              var files = document.getElementById('headimg');
                // 上傳文件
                //              task.addData("name","photo");
                var wt=plus.nativeUI.showWaiting();
                var task=plus.uploader.createUpload(url,
                    {method:"POST", priority: 60, timeout: 20, blocksize:100000000241024,retry:1},
                    function(t,status){ //上傳完成
                        
                        if(status==200){
//                                alert("上傳成功:"+t.responseText);
                            wt.close(); //關閉等待提示按鈕
                        }else{
                            alert("上傳失敗");
                            wt.close();//關閉等待提示按鈕
                        }
                    }
                );
                //添加其餘參數
                task.addFile(src,{key:"uploadFile"});

                task.start();
            }

經測試,此方式可兼容安卓,iOS,然而圖片未壓縮,上傳速度慢,一樣查看文檔找到壓縮代碼:spa

 resizeImage(src) {
              var that = this;
              plus.zip.compressImage(
                {
                  src: src,
                  dst: src,
                  overwrite: true,
                  width: '270px', //這裏指定了寬度,一樣能夠修改
                  format: 'jpg',
                  quality: 100  //圖片質量再也不修改,以避免失真
                },
                function(e) {
                  plus.nativeUI.closeWaiting();
                  that.upload(e.target);  //上傳圖片, e.target存的是本地路徑!
                },
                function(err) {
                  plus.nativeUI.alert('未知錯誤!',function() {
//                    mui.back();
                  });
                }
              );
            },

以上。

相關文章
相關標籤/搜索