本文例項為大家分享了實現調取手機攝像頭和相簿的具體程式碼，供大家參考，具體內容如下

自己總結的手機端拍照和相簿原生的方法

HTML程式碼

<div>
//要顯示的圖片
  <div class="imgBox name">
      <img :src="imgSrc" />
  </div>
  <van-action-sheet v-model="show1">
   <ul>
    <li class="paizhao" @click="captureImage()">拍照</li>
    <li class="paizhao" @click="galleryImg()">從相簿選擇</li>
    <li class="paizhao" @click="quxiao()">取消</li>
   </ul>
  </van-action-sheet> 
</div>

邏輯程式碼

//data裡宣告的變數
data（）{
return{
 imgSrc: "",//展示的圖片路徑
      tupianlist: "",//展示的圖片容器
 }
}

在methods事件方法定義事件名

methods：{
     // 從相簿中選取圖片
    galleryImg() {
      let This = this;
      console.log("從相簿中選擇圖片:");
      plus.gallery.pick(function(path) {
        This.imgSrc = path; //path 是本地路徑
        let img = new Image();
        img.src = path;
        img.onload = function(path) {
          var that = img;
          var w = that.width,//320
            h = that.height,//426
            scale = w / h;
          w = 320 || w;
          h = w / scale;
          var canvas = docume
 
nt.createElement("canvas");
          canvas.width = 300; //這個設定不能丟，否者會成為canvas預設的300*150的大小
          canvas.height = 300; //這個設定不能丟，否者會成為canvas預設的300*150的大小
          var ctx = canvas.getContext("2d");
          ctx.drawImage(that,300,300);
          var base64 = canvas.toDataURL(
            "image/png","tbOcTeximage/jpeg","image/jpg",1 || 0.8
          );     
          This.tupianlist = base64;
          // console.log(This.tupianlist + "我是轉碼後的base");
 
  //這裡可以請求介面
        };
      });
    },// 拍照
    captureImage() {
      let This = this;
      var cmr = plus.camera.getCamera(); //獲取攝像頭管理物件
      var res = cmr.supportedImageResolutions[0]; //字串陣列，攝像頭支援的拍照解析度
      var fmt = cmr.supportedImageFormats[0]; //字串陣列，攝像頭支援的拍照檔案格式
      // console.log("拍照解析度: " + res + ",拍照檔案格式: 
 
" + fmt);
      cmr.captureImage(
        function(path) {
          plus.gallery.save(path,params => {
            let fiwww.cppcns.comle = params.file;
            //編碼為base64
            var img = new Image();
            img.src = file;
            img.onload = function() {
              var that = img;
              var w = that.width,h = thatwww.cppcns.com.height,scale = w / h;
              w = 320 || w;
              h = w / scale;
              var canvas = document.createElement("canvas");
              canvas.width = 300; //這個設定不能丟，否者會成為canvas預設的300*150的大小
              canvas.height = 300; //這個設定不能丟，否者會成為canvas預設的300*150的大小
              var ctx = canvas.getContext("2d");
              ctx.drawImage(that,300);
              var base64 = canvas.toDataURL(
                "image/png","image/jpeg",1 || 0.8
              );
              // console.log(base64);
              This.tupianlist = base64;
  //這裡可以請求介面
            };
          });
          //進行拍照操作
          // 通過URL引數獲取目錄物件或檔案物件
          plus.io.resolveLocalFileSystemURL(path,function(entry) {
            var tmpPath = entry.toLocalURL(); //獲取目錄路徑轉換為本地路徑URL地址
            This.imgSrc = tmpPath;
            // alert("拍攝成功: " + tmpPath);
          });
        },function(error) {
          //捕獲影象失敗回撥
          // alert("捕獲影象失敗: " + error.message);
        },{ resolution: res,format: fmt }
      );
      this.show1 = false;
    },}

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。