webapp 调用摄像头或相册获取本地图片后压缩上传到服务器

最新推荐文章于 2023-04-11 17:18:46 发布

brake_lzk

最新推荐文章于 2023-04-11 17:18:46 发布

阅读量1.9k

点赞数

CC 4.0 BY-SA版权

分类专栏： html js webapp 文章标签： html js webapp 拍照相册选取照片压缩上传服务器

本文链接：https://blog.youkuaiyun.com/brake_lzk/article/details/81014936

html 同时被 3 个专栏收录

7 篇文章

订阅专栏

6 篇文章

订阅专栏

webapp

1 篇文章

订阅专栏

html

 <button onclick="getImg()">点击选取图片压缩上传</button>

             //点击事件，弹出选择摄像头和相册的选项
              function getImg() {  
                  var bts = [{  
                      title: "拍照"  
                  }, {  
                      title: "从相册选择"  
                  }];  
                  plus.nativeUI.actionSheet({  
                          cancel: "取消",  
                          buttons: bts  
                      },  
                      function(e) {  
                          if (e.index == 1) {  
                              getImage();  
                          } else if (e.index == 2) {  
                              galleryImgs();  
                          }  
                      }  
                  );  
              }

            //调用手机摄像头并拍照
             function getImage() {  
                 var cmr = plus.camera.getCamera();  
                 cmr.captureImage(function(p) { 
                  // alert('拍照'+p)
                     plus.io.resolveLocalFileSystemURL(p, function(entry) { 
                         
                         compressImage(entry.toLocalURL(),entry.name);  
                     }, function(e) {  
                         plus.nativeUI.toast("读取拍照文件错误：" + e.message);  
                     });  
                 }, function(e) {  
                 }, {  
                     filter: 'image' 
                 });  
             }

          //从相册选择照片
             function galleryImgs() {  
                  plus.gallery.pick(function(e) {
                      // alert(e)  
                      var name = e.substr(e.lastIndexOf('/') + 1);
                     compressImage(e,name);
                  }, function(e) {  
                  }, {  
                      filter: "image"  
                  });  
              }

          //压缩图片  
             function compressImage(url,filename){  
                 var name="_doc/upload/"+filename;
                 plus.zip.compressImage({  
                         src:url,//src: (String 类型 )压缩转换原始图片的路径  
                         dst:name,//压缩转换目标图片的路径  
                         quality:40,//quality: (Number 类型 )压缩图片的质量.取值范围为1-100  
                         overwrite:true//overwrite: (Boolean 类型 )覆盖生成新文件  
                     },  
                     function(zip) {
                      console.log('图片压缩后路径'+zip.target)
                      createUpload(zip.target)
                     },function(error) {  
                         plus.nativeUI.toast("压缩图片失败，请稍候再试");  
                 });  
             } 

        //上传图片

        function createUpload(url){
        //服务器地址
        var server="图片服务器地址";
        var wt=plus.nativeUI.showWaiting();
        var task=plus.uploader.createUpload(server,
            {method:"POST"},
            function(t,status){
                //上传完成
                if(status==200){
                    wt.close();
                    //服务端返回的结果
                    var result = JSON.parse(t.responseText);
                    console.log("上传成功返回结果："+result)
                }else{
                    console.log("上传失败："+status);
                    wt.close();
                }
            }
        );
        //将文件添加到上传队列中
        task.addFile(url,{key:'file'});
        task.start();
    }