一，直接上可以代碼參考下ltscript 判斷瀏覽器是否支持HTML5 Canvas windowonload = function try 動(dòng)態(tài)創(chuàng)建一個(gè)canvas元 ，并獲取他2Dcontext如果出現(xiàn)異常則表示不支持 documentcreateElementquotcanvasquot。

1實(shí)現(xiàn)頭部的方法代碼2編寫css樣式的方法代碼3html上傳代碼4js處理的方法代碼5測(cè)試效果如下注意事項(xiàng)JavaScript是一種屬于網(wǎng)絡(luò)的腳本語(yǔ)言，已經(jīng)被廣泛用于Web應(yīng)用開發(fā)，常用來(lái)為網(wǎng)頁(yè)添加各式各樣的動(dòng)態(tài)功能。

2 拍照 拍照是采用HTML5的Canvas功能，實(shí)時(shí)捕獲Video標(biāo)簽的內(nèi)容，因?yàn)閂ideo元素可以作為Canvas圖像的輸入，所以這一點(diǎn)很好實(shí)現(xiàn)主要代碼如下var canvas=documentcreateElement‘canvas’ 動(dòng)態(tài)創(chuàng)建畫布對(duì)象 var ctx=can。

步驟三添加拍照功能 完成小人換裝的效果后，我們還需要添加拍照功能可以使用HTML5的Canvas和Webcam API來(lái)實(shí)現(xiàn)使用Canvas可以實(shí)現(xiàn)將小人和各種衣服配件進(jìn)行拼接，并且添加各種特效而使用Webcam API則可以實(shí)現(xiàn)從網(wǎng)頁(yè)中直接。

5測(cè)試結(jié)果如下注意事項(xiàng)JavaScript是一種網(wǎng)絡(luò)腳本語(yǔ)言，在web應(yīng)用開發(fā)中得到了廣泛的應(yīng)用，它經(jīng)常被用來(lái)為網(wǎng)頁(yè)添加各種動(dòng)態(tài)功能，為用戶提供更加流暢美觀的瀏覽效果，通常JavaScript腳本被嵌入到HTML中來(lái)實(shí)現(xiàn)自己的功能。

然后，簡(jiǎn)單的說(shuō)就是利用html5的api navigatorgetUserMedia來(lái)開啟設(shè)備的攝像頭，瀏覽器上會(huì)出現(xiàn)圖示中的提示 if navigatorgetUserMedia 標(biāo)準(zhǔn)的API navigatorgetUserMedia quotvideoquot true ， function stream。

二 視頻流 HTML5推出了The Media Capture API，可以實(shí)現(xiàn)對(duì)攝像頭的訪問，關(guān)于對(duì)音頻等接口的使用也可以，具體參考w3c規(guī)范獲取的視頻流是通過(guò)video標(biāo)簽的我們可以看看蔣先生的示例代碼，但是有不完善的地方，我也會(huì)加以。

html5需要使用接口chrome30+ for android 已經(jīng)實(shí)現(xiàn)了利用webcam，調(diào)用手機(jī)后置攝像頭，代碼如下lt！DOCTYPE html lthtml xmlns=quotquot lthead lttitleHTML5 GetUserMedia Demolttitle ltmeta name=quotviewportquot content=quotwidth。

html5提供了 navigatorgetUserMedia接口使用設(shè)備攝像頭，chrome28上測(cè)試已經(jīng)可用，復(fù)手機(jī)端瀏覽器測(cè)試發(fā)制現(xiàn)只有opera瀏覽器可用瀏覽器未完善之前可以使用PhoneGap完成，它提供了zhidao 接口，使用js可以。

調(diào)用攝像頭 scopephotoErr = falsescopephotoBtnDiable = truevar mediaStream = null，track = nullnavigatorgetMedia = navigatorgetUserMedia navigatorwebkitGetUserMedia navigatormozGetUserMedia navig。

filequot name=quotuploadquot onchange=quotonChooseFilethisquot accept=quotimagepng，imagejpeg，imagegifquot capture=quotcameraquot 其中capture屬性必須加上，accept屬性應(yīng)該這樣定義accept=quotimage*quot，否則在網(wǎng)頁(yè)中無(wú)法使用拍照功能。

h5不能直接調(diào)用攝像頭，只能用ltinput type=quotfilequot 上傳圖片來(lái)間接調(diào)用攝像頭。

第一步，繪制畫布區(qū)間 第二步，畫出基礎(chǔ)探照燈效果 第三步，JS代碼進(jìn)行畫布旋轉(zhuǎn)效果 第四步，增加CSS提示要求需要的陰影效果 可DW制作。

case 5ctxtranslateresizewidth， 0ctxscale1， 1ctxrotate90 * MathPI 180ctxdrawImageimg， 0， resizewidth， resizeheight， resizewidthbreakcase 7ctxtranslateresizewidth， 0。

ltinput type=quotfilequot accept=quotvideo*capture=camcorderquotltinput type=quotfilequot accept=quotaudio*capture=microphonequot之前做過(guò)微信的一些項(xiàng)目，在ios上使用這個(gè)file域是可以實(shí)現(xiàn)拍照和選擇相冊(cè)的 但是由于安卓機(jī)的。

制作圖片的放大效果我考慮到的方法是將原始圖片繪制到canvas上，然后在對(duì)canvas進(jìn)行局部裁剪最后對(duì)裁剪的部分進(jìn)行放大，這樣就可以實(shí)現(xiàn)放大鏡的效果這里我給出一個(gè)實(shí)現(xiàn)這個(gè)想法的示例該示例實(shí)際上就是運(yùn)用HTML5 canvas中對(duì)。