摘要：攝像拍照，濾鏡中文指南本文出自春哥個(gè)人博客作者黎躍春追時(shí)間的人簡(jiǎn)介是推出的一個(gè)天挑戰(zhàn)。完整中文版指南及視頻教程在從零到壹全棧部落。這個(gè)新的對(duì)象表示指定的對(duì)象或?qū)ο蟆?/p>

本文出自：春哥個(gè)人博客
作者：?黎躍春-追時(shí)間的人
簡(jiǎn)介：JavaScript30 是 Wes Bos 推出的一個(gè) 30 天挑戰(zhàn)。項(xiàng)目免費(fèi)提供了 30 個(gè)視頻教程、30 個(gè)挑戰(zhàn)的起始文檔和 30 個(gè)挑戰(zhàn)解決方案源代碼。目的是幫助人們用純 JavaScript 來(lái)寫東西，不借助框架和庫(kù)，也不使用編譯器和引用。現(xiàn)在你看到的是這系列指南的第 19 篇。完整中文版指南及視頻教程在 從零到壹全棧部落。

JS30天第19天挑戰(zhàn)的是如何調(diào)用攝像頭錄像、播放，如何捕捉視頻將其繪制canvas，還有拍照，以及濾鏡的制作。

通過(guò)npm install安裝依賴包

通過(guò)npm start啟動(dòng)服務(wù)器

瀏覽器直接訪問(wèn)http://localhost:3000

liyuechun:19 - Webcam Fun yuechunli$ pwd
/Users/liyuechun/Documents/js30/JavaScript30-liyuechun/19 - Webcam Fun
liyuechun:19 - Webcam Fun yuechunli$ ls
README.md        package-lock.json    scripts.js
index.html        package.json        style.css
liyuechun:19 - Webcam Fun yuechunli$ npm install

> fsevents@1.1.2 install /Users/liyuechun/Documents/js30/JavaScript30-liyuechun/19 - Webcam Fun/node_modules/fsevents
> node install

[fsevents] Success: "/Users/liyuechun/Documents/js30/JavaScript30-liyuechun/19 - Webcam Fun/node_modules/fsevents/lib/binding/Release/node-v57-darwin-x64/fse.node" already installed
Pass --update-binary to reinstall or --build-from-source to recompile
npm WARN gum@1.0.0 No repository field.

added 411 packages in 5.921s
liyuechun:19 - Webcam Fun yuechunli$ npm start

> gum@1.0.0 start /Users/liyuechun/Documents/js30/JavaScript30-liyuechun/19 - Webcam Fun
> browser-sync start --server --files "*.css, *.html, *.js"

[Browsersync] Access URLs:
 --------------------------------------
       Local: http://localhost:3000
    External: http://192.168.1.116:3000
 --------------------------------------
          UI: http://localhost:3001
 UI External: http://192.168.1.116:3001
 --------------------------------------
[Browsersync] Serving files from: ./
[Browsersync] Watching files...

獲取到瀏覽器的攝像頭的影像

將影像的記錄導(dǎo)出到canvas中

通過(guò)獲取canvas中的圖片信息，對(duì)圖片添加濾鏡

省時(shí)的瀏覽器同步測(cè)試工具,Browsersync能讓瀏覽器實(shí)時(shí)、快速響應(yīng)您的文件更改（html、js、css、sass、less等）并自動(dòng)刷新頁(yè)面。更重要的是Browsersync可以同時(shí)在PC、平板、手機(jī)等設(shè)備下進(jìn)項(xiàng)調(diào)試。您可以想象一下：“假設(shè)您的桌子上有pc、ipad、iphone、android等設(shè)備，同時(shí)打開了您需要調(diào)試的頁(yè)面，當(dāng)您使用browsersync后，您的任何一次代碼保存，以上的設(shè)備都會(huì)同時(shí)顯示您的改動(dòng)”。無(wú)論您是前端還是后端工程師，使用它將提高您30%的工作效率。

有了它，您不用在多個(gè)瀏覽器、多個(gè)設(shè)備間來(lái)回切換，頻繁的刷新頁(yè)面。更神奇的是您在一個(gè)瀏覽器中滾動(dòng)頁(yè)面、點(diǎn)擊等行為也會(huì)同步到其他瀏覽器和設(shè)備中，這一切還可以通過(guò)可視化界面來(lái)控制。

function getVideo(){
    navigator.mediaDevices.getUserMedia({video:true,audio:false})
        .then(videostream => {
            console.log(videostream);
            video.src = URL.createObjectURL(videostream); // 創(chuàng)建url（creates  a URL for the specified object）
            video.play();
        })
        .catch((err) => {
            console.error("OH,Don"t have permission to use your local cam!",err);
        });
}

MediaDevices.getUserMedia()

MediaDevices.getUserMedia()方法提示用戶允許使用一個(gè)視頻和/或一個(gè)音頻輸入設(shè)備，例如相機(jī)或屏幕共享和/或麥克風(fēng)。如果用戶給予許可，就返回一個(gè)Promise對(duì)象，MediaStream對(duì)象作為此Promise對(duì)象的Resolved［成功］狀態(tài)的回調(diào)函數(shù)參數(shù)，相應(yīng)的，如果用戶拒絕了許可，或者沒有媒體可用的情況下，PermissionDeniedError或者NotFoundError作為此Promise的Rejected［失敗］狀態(tài)的回調(diào)函數(shù)參數(shù)。注意，由于用戶不會(huì)被要求必須作出允許或者拒絕的選擇，所以返回的Promise對(duì)象可能既不會(huì)觸發(fā)resolve也不會(huì)觸發(fā)reject。

URL.createObjectURL()。

URL.createObjectURL() 靜態(tài)方法會(huì)創(chuàng)建一個(gè)DOMString，其中包含一個(gè)表示參數(shù)中給出的對(duì)象的URL。這個(gè)URL 的生命周期和創(chuàng)建它的窗口中的document 綁定。這個(gè)新的URL對(duì)象表示指定的File 對(duì)象或Blob 對(duì)象。

function printToCanvas(){
    let width = video.videoWidth;
    let height = video.videoHeight;
    canvas.height = height;
    canvas.width = width; // 勿忘：設(shè)置canvas的寬和高
    console.log(width,height);
    return setInterval(() => {
        ctx.drawImage(video,0,0,width,height);

        // get the image data
        let imagedata = ctx.getImageData(0,0,width,height);
        // console.log(imagedata.data);

        // mess the image data
        // imagedata = redEffect(imagedata);
        // imagedata = rgbsplit(imagedata);
        // ctx.globalAlpha = 0.2;
        imagedata = greenScreen(imagedata);

        // put the image data back
        ctx.putImageData(imagedata,0,0);
    },16);
}

ctx.drawImage()

它能夠?qū)?dāng)前的視頻流（video）中的一幀畫在canvas中。

getImageData()

ctx.getImageData()返回一個(gè)ImageData對(duì)象，用來(lái)描述canvas區(qū)域隱含的像素?cái)?shù)據(jù)，這個(gè)區(qū)域通過(guò)矩形表示，起始點(diǎn)為(sx, sy)、寬為sw、高為sh。

putImageData()

ctx.putImageData():該方法是 Canvas 2D API 將數(shù)據(jù)從已有的 ImageData 對(duì)象繪制到位圖的方法。 如果提供了臟矩形，只能繪制矩形的像素。

imagedata信息

imagedata中有大量的數(shù)據(jù)，其中分別代表了圖片的顏色信息，分別為red，green，blue，alpha的值，因此我們可以同添加自定義濾鏡，通過(guò)改變顏色的rgba的值，控制頁(yè)面的效果。

function takePhoto(){
    // 播放音效
    snap.currentTime = 0;
    snap.play();
    
    // 獲取圖像數(shù)據(jù)
    let data = canvas.toDataURL("image/jpeg");
    // console.log(data);
    let link = document.createElement("a");
    link.href = data;
    link.setAttribute("downlond","handsome");
    link.innerHTML = ``
    strip.insertBefore(link,strip.firstChild);
}

在沒次點(diǎn)擊照相的時(shí)候，都要求播一遍音效，并且為了模擬現(xiàn)實(shí)情況，我們?cè)谟脩酎c(diǎn)擊時(shí)，設(shè)置當(dāng)前的播放時(shí)間為0，再播放音效。

canvas.toDataURL("image/jpeg");方法返回一個(gè)包含圖片展示的 data URI 。可以使用 type 參數(shù)其類型，默認(rèn)為 PNG 格式。圖片的分辨率為96dpi。

接下來(lái)新建一個(gè)a元素，設(shè)置其href的值為data。在插入在文檔中。實(shí)現(xiàn)截圖成功的效果。

// 紅色特效濾鏡
function redEffect(imagedata){
    for(let i = 0;i {
    levels[input.name] = input.value;
  });

  for (i = 0; i < pixels.data.length; i = i + 4) {
    red = imagedata.data[i + 0];
    green = imagedata.data[i + 1];
    blue = imagedata.data[i + 2];
    alpha = imagedata.data[i + 3];

    if (red >= levels.rmin
      && green >= levels.gmin
      && blue >= levels.bmin
      && red <= levels.rmax
      && green <= levels.gmax
      && blue <= levels.bmax) {
      // take it out!
      imagedata.data[i + 3] = 0;
    }
  }

  return imagedata;
}

這部分主要定義了三個(gè)濾鏡，由于我們通過(guò)ctx.getImageData可以獲取到頁(yè)面顏色的rgba的值，因此我們添加濾鏡的原理也是這樣，通過(guò)循環(huán)改變一張圖片中的所有rgba的值即可。

Github Source Code