怎么利用js給自己照相并修圖

這篇文章主要講解了“怎么利用js給自己照相并修圖”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“怎么利用js給自己照相并修圖”吧！

效果展示

1.思路

1.1搭建靜態頁面

兩塊大區域：1塊是控制區域，另一塊是照相區

1.1.1 控制區域

• 兩個按鈕，一個是點擊是拍照并播放音樂，另一個是給拍照后的圖片區域的圖片進行修飾。

• 六個滑動欄，對應六種顏色，不同的滑動，它的RGB值不同

• 六個滑動欄，移動的位置不同得出不同的值給圖片的組合效果不同

1.1.2照片區域

首先會在實時視頻區域得到照片，點擊照相時，圖片出現在圖片區域

此時滑動滑動欄修改圖片，點擊保存，圖片出現在變色畫布區域

<div class="photobooth">
     <div class="controls">
        <!--綁定點擊拍照函數takePhoto()-->
       <button onClick="takePhoto()">Take Photo</button>
         <!--綁定點擊保存照片函數savePhoto()-->
       <button onClick="savePhoto()">Save Photo</button>
     <div class="rgb">
         <!--六種顏色，不同移動位置，RGB值不同-->
         <label for="rmin">Red Min:</label>
         <input type="range" min=0 max=255 name="rmin" value="0">
         <label for="rmax">Red Max:</label>
         <input type="range" min=0 max=255 name="rmax" value="255">
         <br>
         <label for="gmin">Green Min:</label>
         <input type="range" min=0 max=255 name="gmin" value="0">
         <label for="gmax">Green Max:</label>
         <input type="range" min=0 max=255 name="gmax" value="255">
         <br>
         <label for="bmin">Blue Min:</label>
         <input type="range" min=0 max=255 name="bmin" value="0">
         <label for="bmax">Blue Max:</label>
         <input type="range" min=0 max=255 name="bmax" value="255">
       </div> 
     </div>
     <div class="hasimg">
     <p>照片區域：</p>
     <canvas class="photo" height="400" width="500"></canvas>
     </div>
     <div class="hasimg">
     <p>實時視頻區域：</p>
     <video class="player"></video>
     </div>
     <div class="hasimg">
     <p>變色畫布區域:</p>
     <div class="strip">
     <a href="">
       <img alt="暫未保存圖像" id='myimg'>
     </a>
     </div>
     </div>
   </div>
   <audio class="snap" src="2.mp3" ></audio>

2.實現

2.1申請網絡攝像頭操作權限

function askWebcam() {
     //用于向設備申請照相功能
     navigator.getUserMedia = navigator.getUserMedia ||
         navigator.webkitGetUserMedia ||
         navigator.mozGetUserMedia;
     if (navigator.getUserMedia) {
         navigator.getUserMedia({
             audio: false,
             video: {
                 width: 300,
                 height: 200
             }
         }, function(stream) {
             //若成功
             video.srcObject = stream;
             video.onloadedmetadata = function(e) {
                 video.play();
             }
         }, function(err) {
             console.log('Error occured:' + err.name);
         });
     } else {
         console.log('this navigator doesn\'t support webcam!');
     }
 }

用于向你的設備調用攝像頭權限。點擊彈出的確認框

在里面的video中可以設置你實時錄像的屏幕大小

2.2點擊照相函數和保存圖片

//點擊函數
 function takePhoto() {
     ctx.drawImage(video, 0, 0, 300, 200);
     //將原始截圖保存
     origindata = ctx.getImageData(0, 0, 300, 200);
     //點擊拍照圖片時播放音樂
     audio.play()
 }
 
 //保存圖片
 function savePhoto() {
     img.src = canvas.toDataURL();
     a.href = canvas.toDataURL();
     a.setAttribute('download', 'handsome');
 }

2.3綁定change事件動態修改圖片顏色

slider.onchange = function changeImage(e) {
     //先將canvas恢復至原始截圖
         ctx.putImageData(origindata, 0, 0);
         const target = e.target;
  //startPos表示操作像素點數據時的起點，
 //從canvas獲取到的像素數據每四個值表示一個像素點
    //例如滑塊為紅色，則只需要改變像素數組中第0,4,8......個元素的值。
         const startPos = {
             'r': 0,
             'g': 1,
             'b': 2
         }[target.name[0]];
         //filterMin和filterMax表示相應的濾色范圍上下限，
       //若修改了紅色濾色范圍則取紅色范圍值。
         //若修改藍色的濾色范圍，則取藍色。
         var tempFilter = checkFilter(target.name, target.value);
         const filterMin = tempFilter.min;
         const filterMax = tempFilter.max;
         //從canvas獲取像素數據
         var img = ctx.getImageData(0, 0, 300, 200);
 
         var imgd = img.data;
         //色彩過濾
         for (var i = startPos, len = imgd.length; i < len; i += 4) {
             if (imgd[i] < filterMin) {
                 imgd[i] = filterMin;
             } else if (imgd[i] > filterMax) {
                 imgd[i] = filterMax;
             }
         }
         //將修改后的像素數據重繪制至canvas
         ctx.putImageData(img, 0, 0);
         img.src = canvas.toDataURL();
     }
 }

2.4濾色函數

function checkFilter(name, value) {
     var _min;
     var _max;
     var _antiname = {
         'rmin': 'rmax',
         'rmax': 'rmin',
         'gmin': 'gmax',
         'gmax': 'gmin',
         'bmin': 'bmax',
         'bmax': 'bmin'
     }[name]
     filter[name] = value;
     //當下限值超過上限時，將兩者對調
     _min = Math.min(filter[name], filter[_antiname]);
     _max = Math.max(filter[name], filter[_antiname]);
     console.log(filter);
     return {
         min: _min,
         max: _max
     }
 }

2.5全部代碼

window.onload = function() {
     canvas = document.querySelector('canvas');
     video = document.querySelector('video');
    audio=document.querySelector('audio')
     ctx = canvas.getContext('2d');
     img = document.querySelector('#myimg');
     slider = document.querySelector('.rgb');
     a = document.querySelector('a');
     //濾色范圍記錄
     filter = {
         rmin: 0,
         rmax: 255,
         gmin: 0,
         gmax: 255,
         bmin: 0,
         bmax: 255
     }
     //調用攝像頭數據
       askWebcam();
       changeImage(e)
  }
  //點擊函數
  takePhoto()
  //保存圖片
  savePhoto()
 //申請網絡攝像頭操作權限
  askWebcam() 
 //濾色函數
  checkFilter(name, value)

2.6css部分代碼

 html,body{
     padding: 0;
     margin: 0;
     height: 100%;
     width: 100%;
 }
 .player{
     height:200px;
     width:300px;
 }
 .hasimg{
     display:inline-block;
     vertical-align: top;
 }
 .strip{
     height:200px;
     width:300px;
 }
 .controls{
     margin-left:400px;
     background-color: aqua;
     width:600px;
     height:200px;
 }
 .controls button{
     margin:10px 50px;
 
 }
 .rgb{
     margin-top:50px;
     text-align: center;
 }

2.7自我添加

如果大家想讓照片更加好看的話，可以去深入研究一下RGB函數

如果想頁面呈現效果更加的話，可以添加一張好看的背景圖片

如果還有其他想添加的地方，盡管發揮你的頭腦吧。

感謝各位的閱讀，以上就是“怎么利用js給自己照相并修圖”的內容了，經過本文的學習后，相信大家對怎么利用js給自己照相并修圖這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！