vue realizes the function of retrieving mobile phone camera and photo album

In this paper, we share the specific codes of vue to retrieve mobile phone cameras and photo albums for your reference. The specific contents are as follows

My own summary of the original method of taking pictures and photo albums on the mobile phone

HTML code

<div>
// Picture to display 
  <div class="imgBox name">
      <img :src="imgSrc" />
  </div>
  <van-action-sheet v-model="show1">
   <ul>
    <li class="paizhao" @click="captureImage()"> Photographing </li>
    <li class="paizhao" @click="galleryImg()"> Select from Album </li>
    <li class="paizhao" @click="quxiao()"> Cancel </li>
   </ul>
  </van-action-sheet> 
</div>

js logic code

//data Variables declared in 
data () {
return{
 imgSrc: "", // The path of the picture displayed 
      tupianlist: "", // Picture container for display 
 }
}

Define the event name in the methods event method

methods : {
     //  Choose a picture from an album 
    galleryImg() {
      let This = this;
      console.log(" Select a picture from an album :");
      plus.gallery.pick(function(path) {
        This.imgSrc = path; //path  Is a local 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 = document.createElement("canvas");
          canvas.width = 300; // This setting cannot be lost, otherwise it will become canvas Default 300*150 The size of 
          canvas.height = 300; // This setting cannot be lost, otherwise it will become canvas Default 300*150 The size of 
          var ctx = canvas.getContext("2d");
          ctx.drawImage(that, 0, 0, 300, 300);
          var base64 = canvas.toDataURL(
            "image/png",
            "image/jpeg",
            "image/jpg",
            1 || 0.8
          );     
          This.tupianlist = base64;
          // console.log(This.tupianlist + " I'm transcoded base");
 
  // Interfaces can be requested here 
        };
      });
    },
    //  Photographing 
    captureImage() {
      let This = this;
      var cmr = plus.camera.getCamera(); // Getting Camera Management Objects 
      var res = cmr.supportedImageResolutions[0]; // String array, camera supported photo resolution 
      var fmt = cmr.supportedImageFormats[0]; // String array, camera supported photo file format 
      // console.log(" Photographic resolution : " + res + ",  Photo file format : " + fmt);
      cmr.captureImage(
        function(path) {
          plus.gallery.save(path, params => {
            let file = params.file;
            // Coded as base64
            var img = new Image();
            img.src = file;
            img.onload = function() {
              var that = img;
              var w = that.width,
                h = that.height,
                scale = w / h;
              w = 320 || w;
              h = w / scale;
              var canvas = document.createElement("canvas");
              canvas.width = 300; // This setting cannot be lost, otherwise it will become canvas Default 300*150 The size of 
              canvas.height = 300; // This setting cannot be lost, otherwise it will become canvas Default 300*150 The size of 
              var ctx = canvas.getContext("2d");
              ctx.drawImage(that, 0, 0, 300, 300);
              var base64 = canvas.toDataURL(
                "image/png",
                "image/jpeg",
                "image/jpg",
                1 || 0.8
              );
              // console.log(base64);
              This.tupianlist = base64;
  // Interfaces can be requested here 
            };
          });
          // Take a photo operation 
          //  Pass URL Parameter to get a directory object or file object 
          plus.io.resolveLocalFileSystemURL(path, function(entry) {
            var tmpPath = entry.toLocalURL(); // Get directory path converted to local path URL Address 
            This.imgSrc = tmpPath;
            // alert(" Successful shooting : " + tmpPath);
          });
        },
        function(error) {
          // Capture Image Failure Callback 
          // alert(" Capture image failed : " + error.message);
        },
        { resolution: res, format: fmt }
      );
      this.show1 = false;
    },
}