Vue realizes the function of uploading photos on PC

This article example shares the specific code of Vue to realize the photo upload function on the PC for your reference. The specific content is as follows

<!DOCTYPE html> 
<html> 
  <head> 
    <meta charset="UTF8">
  </head> 
  <body>  
 
<div id="contentHolder">       
<video id="video" width="320" height="320" autoplay></video>       
<button id="camera">Take a photo</button>        
<canvas id="canvas" width="320" height="320">
</canvas> 
</div>
 
<script type="text/javascript">  
var video = document.getElementById('video');
var track;
var Camera = document.getElementById('camera');
 window.addEventListener("DOMContentLoaded", function(){
 navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
  if (navigator.getUserMedia) {
    navigator.getUserMedia({video:true},
     function(stream) {
      track = stream.getTracks()[0]; // Use this to turn off the camera video.src = window.URL.createObjectURL(stream);
      video.onloadedmetadata = function(e) {
           video.play();
         };
     },
     function(err) {
        alert(err.name);
     }
    );
  }  
 
  
 });   
 
 
Camera.onclick = function(){
 var canvas = document.getElementById('canvas');
 var context2D = canvas.getContext("2d");
 context2D.fillStyle = "#ffffff";
 context2D.fillRect(0, 0, 320, 320);
 context2D.drawImage(video, 0, 0, 320, 320);
 var image_code = canvas.toDataURL("image/png"); // Base64 to be passed to the backend
 
 console.log(image_code)
 if (null != track) {
            track.stop(); //Close the camera}
 
};
</script>
  </body> 
</html>

The above code will call the camera when the web page is opened

The code sent to the backend is a base64 code

Below is the code I passed to the background using Vue

var param = {
 file:image_code2
 }
 var a = JSON.stringify(param);
 
 uploadimg(a).then((res) => {
     console.log(res);
          
 });

Below is my PHP background receiving code

public function uploadImg($name="img",$path='img'){
        $_POST = json_decode(file_get_contents('php://input'),true);
        $param = $_POST;
        $image_code = $param['file'];
        $img = str_replace('data:image/png;base64,', '', $image_code); //Get base64 code $img = str_replace(' ', '+', $img);
        $data = base64_decode($img);
        $name = time().".png";
        $savepath = "./upload/".$name; //The location where the image is saved file_put_contents($savepath,$data); //Write the content to the file $this->ajaxReturn(array('status'=>'0','data'=>$savepath));
    }

If you want to click to trigger the camera to open, you can take the code from the camera and put it in a method.

var Camera = document.getElementById('camera');
 window.addEventListener("DOMContentLoaded", function(){
 navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia; 
  
 });   
 
function demo(){
 if (navigator.getUserMedia) {
    navigator.getUserMedia({video:true},
     function(stream) {
      track = stream.getTracks()[0]; // Use this to turn off the camera video.src = window.URL.createObjectURL(stream);
      video.onloadedmetadata = function(e) {
           video.play();
         };
     },
     function(err) {
        alert(err.name);
     }
    );
  }  
}

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in:

Vue2.0 implements the function of calling the camera to take pictures, and exif.js implements the picture upload function
Vue.js 2.0 mobile terminal photo compression picture preview and upload example
Vue2 implements mobile upload, preview, and compression of pictures to solve the problem of photo rotation
Vuejs development component sharing H5 image upload, compression and photo rotation problem handling
Vue.js 2.0 Mobile terminal photo compression image upload preview function
Vue calls the PC camera to realize the photo function
Vue calls the computer camera to realize the photo function
Vue calls the local camera to realize the photo function

<<: MySQL uses the truncate command to quickly clear all tables in a database

>>: Alibaba Cloud Server Linux System Builds Tomcat to Deploy Web Project