Web娴忚鍣ㄥ彉寰楄秺鏉ヨ秺寮哄ぇ锛岀綉绔欏拰Web搴旂敤绋嬪簭涔熻秺鏉ヨ秺澶嶆潅銆傚嚑鍗佸勾鍓嶉渶瑕佽秴绾ц绠楁満鐨勬搷浣滅幇鍦ㄥ彲浠ュ湪鏅鸿兘鎵嬫満涓婅繍琛岋紝鈥嬧€嬪叾涓箣涓€灏辨槸浜鸿劯妫€娴嬨€傛娴嬪拰鍒嗘瀽浜鸿劯鐨勮兘鍔涢潪甯告湁鐢紝鍥犱负瀹冨厑璁告垜浠坊鍔犳櫤鑳界壒寰併€傝濡傝嚜鍔ㄦā绯婁汉鑴革紙濡傝胺姝屽湴鍥撅級銆佸钩绉诲拰缂╂斁鎽勫儚澶翠互鑱氱劍浜虹墿锛堝MicrosoftTeams锛夈€侀獙璇佹姢鐓с€佹坊鍔犳剼锠㈢殑杩囨护鍣紙濡侷nstagram鍜孲napchat锛夌瓑銆備笉杩囧湪姝や箣鍓嶏紝鎴戜滑寰楀厛鎵惧埌閭ｅ紶鑴革紒Face-api.js鏄竴涓簱锛屼娇寮€鍙戜汉鍛樻棤闇€鏈哄櫒瀛︿範鑳屾櫙鍗冲彲鍦ㄥ叾搴旂敤绋嬪簭涓娇鐢ㄤ汉鑴告娴嬨€侴itHub涓婃彁渚涗簡鏈暀绋嬬殑浠ｇ爜銆俬ttps://github.com/sitepoint-...鏈哄櫒瀛︿範浜鸿劯妫€娴嬫娴嬪璞★紙渚嬪浜鸿劯锛夐潪甯稿鏉傘€傛兂涓€鎯筹細涔熻鎴戜滑鍙互缂栧啓涓€涓▼搴忔潵鎵弿鍍忕礌浠ユ壘鍒扮溂鐫涖€侀蓟瀛愬拰鍢村反銆傚彲浠ュ仛鍒帮紝浣嗚浣垮叾瀹屽叏鍙潬瀹為檯涓婃槸涓嶅彲鑳界殑锛屽洜涓鸿鑰冭檻鐨勫洜绱犲緢澶氥€傝€冭檻鐓ф槑鏉′欢銆侀潰閮ㄦ瘺鍙戙€佸悇绉嶅舰鐘跺拰棰滆壊銆佸瀹广€佽搴︺€侀潰缃╁拰璁稿鍏朵粬鍥犵礌銆傜劧鑰岋紝绁炵粡缃戠粶鎿呴暱瑙ｅ喅杩欑被闂锛屽苟涓斿彲浠ユ硾鍖栧埌澶у鏁帮紙濡傛灉涓嶆槸鍏ㄩ儴鐨勮瘽锛夋潯浠躲€傛垜浠彲浠ヤ娇鐢ㄦ祦琛岀殑JavaScript鏈哄櫒瀛︿範搴揟ensorFlow.js鍦ㄦ祻瑙堝櫒涓垱寤恒€佽缁冨拰浣跨敤绁炵粡缃戠粶銆傜劧鑰岋紝鍗充娇鎴戜滑浣跨敤鐜版垚鐨勩€侀璁粌鐨勬ā鍨嬶紝鎴戜滑浠嶇劧瀵瑰悜TensorFlow鎻愪緵淇℃伅鍜岃В閲婅緭鍑虹殑缁嗚妭鏈夋墍浜嗚В銆備娇鐢╢ace-api.js锛屽畠灏嗘墍鏈夎繖浜涘寘瑁呭埌涓€涓洿瑙傜殑API涓€傛垜浠彲浠ヤ紶閫掍竴涓猧mg銆乧anvas鎴杤ideoDOM鍏冪礌锛屽簱灏嗚繑鍥炰竴涓垨涓€缁勭粨鏋溿€侳ace-api.js鍙互妫€娴嬩汉鑴革紝杩樺彲浠ヤ及璁″叾涓殑鍚勭浜嬬墿锛屽涓嬫墍鍒椼€備汉鑴告娴嬶細鑾峰彇涓€涓垨澶氫釜浜鸿劯鐨勮竟鐣岋紝杩欏浜庣‘瀹氬浘鍍忎腑浜鸿劯鐨勪綅缃拰澶у皬寰堟湁鐢ㄣ€侳acialLandmarkDetection锛氳幏鍙栫湁姣涖€佺溂鐫涖€侀蓟瀛愩€佸槾宸村拰鍢村攪浠ュ強涓嬪反鐨勪綅缃拰褰㈢姸銆傝繖鍙敤浜庣‘瀹氭柟鍚戞垨鍦ㄧ壒瀹氬尯鍩熸姇褰卞浘褰紝渚嬪榧诲瓙鍜屽槾鍞囦箣闂寸殑鑳￠』銆傞潰閮ㄨ瘑鍒細纭畾璋佸湪鐢婚潰涓€傞潰閮ㄨ〃鎯呮娴嬶細浠庝竴涓汉鐨勮劯涓婅幏鍙栬〃鎯呫€傚勾榫勫拰鎬у埆妫€娴嬶細浠庨潰閮ㄨ幏鍙栧勾榫勫拰鎬у埆銆傝娉ㄦ剰锛屽湪鈥滄€у埆鈥濈被鍒腑锛屽畠灏嗛潰瀛斿垎绫讳负濂虫€у寲鎴栫敺鎬у寲锛岃繖骞朵笉涓€瀹氫細鎻ず浠栦滑鐨勬€у埆銆傚湪浣犲湪瀹為獙涔嬪浣跨敤杩欎簺涓滆タ涔嬪墠锛岃娉ㄦ剰浜哄伐鏅鸿兘鎿呴暱鏀惧ぇ鍋忚銆傛€у埆鍒嗙被瀵瑰弻鎬ф亱鑰呮潵璇存晥鏋滃緢濂斤紝浣嗗畠鏃犳硶妫€娴嬫垜鐨勯潪鍙屾€ф亱鏈嬪弸鐨勬€у埆銆傚畠澶ч儴鍒嗘椂闂撮兘鑳借瘑鍒嚭鐧戒汉锛屼絾寰€寰€鏃犳硶妫€娴嬪埌鏈夎壊浜虹銆備娇鐢ㄦ鎶€鏈椂瑕侀潪甯稿懆鍒帮紝骞朵笌涓嶅悓鐨勬祴璇曠粍杩涜褰诲簳娴嬭瘯銆傚畨瑁呮垜浠彲浠ラ€氳繃npm瀹夎face-api.js锛歯pminstallface-api.js浣嗘槸锛岃璺宠繃鏋勫缓宸ュ叿鐨勮缃紝鎴戝皢閫氳繃unpkg.org鍖呭惈UMD鍖咃細/*globalsfaceapi*/import'https://unpkg.com/face-api.js@0.22.2/dist/face-api.min.js';涔嬪悗锛屾垜浠渶瑕佷粠搴撶殑瀛樺偍搴撲腑涓嬭浇姝ｇ‘鐨勯璁粌妯″瀷銆傚喅瀹氭垜浠兂浠庨潰閮ㄤ簡瑙ｄ粈涔堬紝骞朵娇鐢ㄥ彲鐢ㄦā鍨嬮儴鍒嗘潵纭畾闇€瑕佸摢浜涙ā鍨嬨€備竴浜涘姛鑳藉彲浠ヤ娇鐢ㄥ涓ā鍨嬨€傚湪杩欑鎯呭喌涓嬶紝鎴戜滑蹇呴』鍦ㄥ甫瀹?鎬ц兘鍜岀簿搴︿箣闂村仛鍑洪€夋嫨銆傛瘮杈冨悇绉嶅彲鐢ㄦā鍨嬬殑鏂囦欢澶у皬锛岀劧鍚庨€夋嫨鎮ㄨ涓烘渶閫傚悎鎮ㄧ殑椤圭洰鐨勬ā鍨嬨€備笉纭畾鎮ㄧ殑搴旂敤闇€瑕佸摢浜涘瀷鍙凤紵鎮ㄥ彲浠ョ◢鍚庤繑鍥炴姝ラ銆傚綋鎴戜滑鍦ㄦ病鏈夊姞杞芥墍闇€妯″瀷鐨勬儏鍐典笅浣跨敤API鏃讹紝灏嗘姏鍑轰竴涓敊璇紝璇存槑搴撻渶瑕佸摢涓ā鍨嬨€傛垜浠幇鍦ㄥ噯澶囧ソ浣跨敤face-api.jsAPI銆傜ず渚嬭鎴戜滑鏋勫缓涓€浜涗笢瑗匡紒瀵逛簬涓嬮潰鐨勭ず渚嬶紝鎴戝皢浣跨敤姝ゅ嚱鏁颁粠UnsplashSource鍔犺浇闅忔満鍥惧儚锛歠unctionloadRandomImage(){constimage=newImage();image.crossOrigin=true;returnnewPromise((resolve,reject)=>{image.addEventListener('error',(error)=>reject(error));image.addEventListener('load',()=>resolve(image));鍥剧墖.src='https://source.unsplash.com/512x512/?face,friends';});}cropimage鎮ㄥ彲浠ュ湪闅忛檮鐨凣itHub瀛樺偍搴撲腑鎵惧埌姝ゆ紨绀虹殑浠ｇ爜銆俬ttps://github.com/sitepoint-...棣栧厛锛屾垜浠繀椤婚€夋嫨骞跺姞杞芥ā鍨嬨€備负浜嗚鍓浘鍍忥紝鎴戜滑鍙渶瑕佺煡閬撲汉鑴哥殑杈圭晫妗嗭紝鎵€浠ヤ汉鑴告娴嬪氨瓒冲浜嗐€傛垜浠彲浠ョ敤涓や釜妯″瀷鏉ュ仛銆係SDMobilenetv1妯″瀷锛堜笉鍒?MB锛夊拰TinyFaceDetector妯″瀷锛堜笉鍒?00KB锛夈€傛垜浠鍑嗙‘鎬ф棤鍏崇揣瑕侊紝鍥犱负鐢ㄦ埛涔熷彲浠ラ€夋嫨鎵嬪姩瑁佸壀銆傛澶栵紝鎴戜滑鍋囪璁块棶鑰呭湪杈冩參鐨処nternet杩炴帴涓婁娇鐢ㄦ鍔熻兘銆傜敱浜庢垜浠殑閲嶇偣鏄甫瀹藉拰鎬ц兘锛屽洜姝ゆ垜浠皢閫夋嫨杈冨皬鐨凾inyFaceDetector妯″瀷銆備笅杞芥ā鍨嬪悗锛屾垜浠彲浠ュ姞杞藉畠锛歛waitfaceapi.nets.tinyFaceDetector.loadFromUri('/models');鎴戜滑鐜板湪鍙互鍔犺浇鍥惧儚骞跺皢鍏朵紶閫掔粰face-api.js銆俧aceapi.detectAllFaces榛樿浣跨敤SSDMobilenetv1妯″瀷锛屽洜姝ゆ垜浠繀椤绘樉寮忎紶閫掓柊鐨刦aceapi.TinyFaceDetectorOptions()浠ュ己鍒跺叾浣跨敤TinyFaceDetector妯″瀷銆俢onstimage=awaitloadRandomImage();constfaces=awaitfaceapi.detectAllFaces(image,newfaceapi.TinyFaceDetectorOptions());鍙橀噺faces鐜板湪鍖呭惈涓€涓粨鏋滄暟缁勩€傛瘡涓粨鏋滈兘鏈変竴涓猙ox鍜宻core灞炴€с€傝鍒嗘暟琛ㄧず绁炵粡缃戠粶瀵圭粨鏋滅‘瀹炴槸浜鸿劯鐨勪俊蹇冪▼搴︺€俠ox鍖呭惈涓€涓甫鏈夐潰閮ㄥ潗鏍囩殑瀵硅薄锛屾垜浠彲浠ラ€夋嫨绗竴涓粨鏋滐紙鎴栬€呮垜浠彲浠ヤ娇鐢╢aceapi.detectSingleFace()锛夛紝浣嗘槸濡傛灉鐢ㄦ埛鎻愪氦浜嗕竴寮犲悎褰憋紝鎴戜滑甯屾湜鍦ㄨ鍓悗鐨勫浘鍍忎腑鐪嬪埌鎵€鏈夌殑浜恒€備负浜嗗仛鍒拌繖涓€鐐癸紝鎴戜滑鍙互璁＄畻涓€涓嚜瀹氫箟杈圭晫妗嗐€俢onstbox={//灏嗚竟鐣岃缃负瀹冧滑鐨勫弽鏃犵┓澶э紝鍥犳浠讳綍鏁板瓧閮芥洿澶?鏇村皬bottom:-Infinity,left:Infinity,right:-Infinity,top:Infinity,//缁欏畾杈圭晫锛屾垜浠彲浠ヨ绠楀搴﹀拰楂樺害getheight(){杩斿洖this.bottom-this.top;},getwidth(){杩斿洖this.right-this.left;},};//鏇存柊妗嗙殑杈圭晫for(constfaceoffaces){box.bottom=Math.max(box.bottom,face.box.bottom);box.left=Math.min(box.left,face.box.left);box.right=Math.max(box.right,face.box.right);box.top=Math.min(box.top,face.box.top);}鏈€鍚庯紝鎴戜滑鍙互鍒涘缓涓€涓敾甯冨苟鏄剧ず缁撴灉锛歝onstcanvas=document.createElement('canvas');constcontext=canvas.getContext('2d');canvas.height=box.height;canvas.width=box.width;context.drawImage(image,box.left,box.top,box.width,box.height,0,0,鐢诲竷銆傚搴︼紝鐢诲竷銆傞珮搴︼級锛涙斁缃〃鎯呯鍙锋偍鍙互鍦ㄩ殢闄勭殑GitHub瀛樺偍搴撲腑鎵惧埌姝ゆ紨绀虹殑浠ｇ爜銆俬ttps://github.com/sitepoint-...涓轰粈涔堜笉鎵剧偣涔愬瓙鍛紵鎴戜滑鍙互鍒朵綔涓€涓繃婊ゅ櫒锛屽皢鍢村反琛ㄦ儏绗﹀彿(馃憚)鏀惧湪鎵€鏈夌溂鐫涗笂銆傝鎵惧埌鐪肩潧鏍囧織锛屾垜浠渶瑕佸彟涓€涓ā鍨嬨€傝繖涓€娆★紝鎴戜滑鍏冲績鍑嗙‘鎬э紝鎵€浠ユ垜浠娇鐢⊿SDMobilenetv1鍜?8鐐归潰閮ㄦ爣蹇楁娴嬫ā鍨嬨€傚悓鏍凤紝鎴戜滑闇€瑕佸厛鍔犺浇妯″瀷鍜屽浘鍍忥細awaitfaceapi.nets.faceLandmark68Net.loadFromUri('/models');绛夊緟faceapi.nets.ssdMobilenetv1.loadFromUri('/models');constimage=awaitloadRandomImage();涓轰簡鑾峰緱鍦版爣锛屾垜浠繀椤诲皢withFaceLandmarks()鍑芥暟璋冪敤闄勫姞鍒癲etectAllFaces()浠ヨ幏鍙栧湴鏍囨暟鎹€俢onstfaces=awaitfaceapi.detectAllFaces(image).withlandmarks();鍜屼笂娆′竴鏍凤紝faces鍖呭惈涓€涓粨鏋滃垪琛ㄣ€傞櫎浜嗕汉鑴哥殑浣嶇疆锛屾瘡涓粨鏋滆繕鍖呭惈鍦版爣鐨勫師鐐瑰垪琛ㄣ€備负浜嗚幏寰楁瘡涓壒寰佺殑姝ｇ‘鍦版爣锛屾垜浠渶瑕佸鐐瑰垪琛ㄨ繘琛屽垏鐗囥€傜敱浜庣偣鏁版槸鍥哄畾鐨勶紝鎴戦€夋嫨浜嗙‖缂栫爜绱㈠紩銆俧or(constfaceoffaces){constfeatures={jaw:face.landmarks.positions.slice(0,17),eyebrowLeft:face.landmarks.positions.slice(17,22),eyebrowRight:face.landmarks.positions.slice(22,27),noseBridge:face.landmarks.positions.slice(27,31),nose:face.landmarks.positions.slice(31,36),eyeLeft:face.landmarks.positions.slice(36,42)),eyeRight:face.landmarks.positions.slice(42,48),lipOuter:face.landmarks.positions.slice(48,60),lipInner:face.landmarks.positions.slice(60),};//銆?.}鐜板湪鎴戜滑缁堜簬鍙互鐜╁緱寮€蹇冧簡銆傛湁寰堝閫夋嫨锛屼絾璁╂垜浠敤鍢村反琛ㄦ儏绗﹀彿(馃憚)閬綇鐪肩潧鍚с€傞鍏堬紝鎴戜滑蹇呴』鍐冲畾灏嗚〃鎯呯鍙锋斁鍦ㄥ摢閲岋紝浠ュ強搴旇鐢诲澶с€備负姝わ紝璁╂垜浠紪鍐欎竴涓緟鍔╁嚱鏁帮紝浠庝换鎰忕偣闆嗗悎鍒涘缓涓€涓锛屽叾涓寘鍚垜浠渶瑕佺殑鎵€鏈変俊鎭€俧unctiongetBoxFromPoints(points){constbox={bottom:-Infinity,left:Infinity,right:-Infinity,top:Infinity,getcenter(){杩斿洖{x:this.left+this.width/2,y:this.top+this.height/2,};},getheight(){杩斿洖this.bottom-this.top;},getwidth(){杩斿洖this.right-this.left;},};for(constpointofpoints){box.left=Math.min(box.left,point.x);box.right=Math.max(box.right,point.x);box.bottom=Math.max(box.bottom,point.y);box.top=Math.min(box.top,point.y);}returnbox;}鐜板湪鎴戜滑鍙互寮€濮嬪湪鍥剧墖涓婄粯鍒惰〃鎯呯鍙蜂簡銆傜敱浜庢垜浠繀椤诲鍙岀溂鎵ц姝ゆ搷浣滐紝鍥犳鎴戜滑鍙互灏唂eature.eyeLeft鍜宖eature.eyeRight鏀惧湪涓€涓暟缁勪腑骞惰凯浠ｅ畠浠紝涓烘瘡鍙溂鐫涙墽琛岀浉鍚岀殑浠ｇ爜銆傚墿涓嬬殑灏辨槸鍦ㄧ敾甯冧笂缁樺埗琛ㄦ儏绗﹀彿锛乫or(consteyeof[features.eyeLeft,features.eyeRight]){consteyeBox=getBoxFromPoints(eye);constfontSize=6*eyeBox.height;context.font=`${fontSize}px/${fontSize}pxserif`;context.textAlign='center';context.textBaseline='搴曢儴';context.fillStyle='#000';context.fillText('馃憚',eyeBox.center.x,eyeBox.center.y+0.6*fontSize);}璇锋敞鎰忥紝鎴戜娇鐢ㄤ簡涓€浜涘够鏁版潵璋冩暣瀛椾綋澶у皬鍜岀‘鍒囩殑鏂囨湰浣嶇疆銆傜敱浜庤〃鎯呯鍙锋槸unicode骞朵笖缃戠粶涓婄殑鎺掔増寰堝鎬紙鑷冲皯瀵规垜鑰岃█锛夛紝鎴戝彧鏄皟鏁存暟瀛楃洿鍒板畠浠湅璧锋潵姝ｇ‘銆備竴绉嶆洿寮哄ぇ鐨勬浛浠ｆ柟娉曟槸浣跨敤鍥惧儚浣滀负鍙犲姞灞傘€傛€讳箣锛孎ace-api.js鏄竴涓緢妫掔殑搴擄紝鍙互璁╀汉鑴告娴嬪拰璇嗗埆鍙樺緱闈炲父瀹规槗銆備笉闇€瑕佺啛鎮夋満鍣ㄥ涔犲拰绁炵粡缃戠粶銆傛垜鍠滄鍙敤鐨勫伐鍏凤紝杩欑粷瀵规槸鍏朵腑涔嬩竴銆傛牴鎹垜鐨勭粡楠岋紝缃戠粶涓婄殑浜鸿劯璇嗗埆浼氬奖鍝嶆€ц兘銆傛垜浠繀椤诲湪甯﹀鍜屾€ц兘鎴栧噯纭€т箣闂村仛鍑洪€夋嫨銆傝緝灏忕殑妯″瀷鑲畾涓嶅お鍑嗙‘锛屽苟涓斾細鐢变簬鎴戝墠闈㈡彁鍒扮殑涓€浜涘洜绱犺€岄敊杩囬潰閮紝渚嬪鍏夌嚎涓嶈冻鎴栭潰閮ㄨ闈㈠叿閬洊銆傚井杞疉zure銆佽胺姝屼簯鍜屽叾浠栧彲鑳界殑浜戞彁渚涗汉鑴告娴嬨€傚洜涓烘垜浠伩鍏嶄笅杞藉ぇ鍨嬫ā鍨嬶紝鍩轰簬浜戠殑妫€娴嬮伩鍏嶄簡绻侀噸鐨勯〉闈㈠姞杞斤紝闅忕潃瀹冪殑棰戠箒鏀硅繘寰€寰€鏇村噯纭紝骞朵笖鐢变簬浼樺寲鐨勭‖浠剁敋鑷冲彲鑳芥洿蹇€傚鏋滄偍闇€瑕侀珮绮惧害锛屾偍鍙兘闇€瑕佺爺绌朵竴涓偍婊℃剰鐨勮鍒掋€傛垜缁濆寤鸿鎮ㄥ皢face-api.js鐢ㄤ簬鍓」鐩€佸疄楠岋紝涔熻杩樻湁MVP銆傛杩庤闃呮垜鐨勬枃绔犲叕浼楀彿銆愬墠绔叏鏍堝紑鍙戙€?/p>
