html5掃描,css掃描
用HTML5 可以實現(xiàn)二維碼掃描識別的功能嗎
可以。
成都創(chuàng)新互聯(lián)公司于2013年開始，是專業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司，擁有項目成都做網(wǎng)站、網(wǎng)站設(shè)計、外貿(mào)營銷網(wǎng)站建設(shè)網(wǎng)站策劃，項目實施與項目整合能力。我們以讓每一個夢想脫穎而出為使命，1280元潁東做網(wǎng)站,已為上家服務(wù),為潁東各地企業(yè)和個人服務(wù),聯(lián)系電話:028-86922220
實現(xiàn)基本步驟：
操作攝像頭，獲取圖片。
技術(shù)要點：MediaStream、GetUserMedia、File api。
利用canvas使用相關(guān)算法分析圖片識別圖片得出結(jié)果。
技術(shù)要點：getImageData
* 涉及到的技術(shù)點瀏覽器們（包括移動端）支持各異，現(xiàn)階段要開發(fā)并投產(chǎn)還不太現(xiàn)實
* 識別算法是一個難點，不過謝謝github，謝謝開源社區(qū)，@Shou Jiesong 的答案中有phonegap的插件地址，支持各種碼。
html5怎么掃描二維碼
掃描二維碼的話，取決于手機攝像頭。
Html5文件的話，你需要將制作好的二維碼圖片放在Html5內(nèi)容里面。
將建好的網(wǎng)址加在微信公眾號，或者是QQ公眾的導(dǎo)航上面，或者是網(wǎng)站里面。
當(dāng)點擊進入頁面之后，會看到二維碼圖片。
用手機按壓圖片，APP會提示掃描圖片中的二維碼？
點擊確定掃描二維碼即可。
注釋：圖片盡量做成像下圖一樣的，增強二維碼的趣味性，吸引其他人掃描。
html5移動端頁面上調(diào)用手機攝像頭掃描二維碼并獲取二維碼信息代碼？
html5移動端調(diào)用手機攝像頭掃描二維碼并獲取二維碼信息代碼如下：
[html]?view plain?copy
!DOCTYPE?html
htmlhead
titleHTML5?code?Reader/title
meta?http-equiv="Content-Type"?content="text/html;?charset=gb2312"
/head
style?type="text/css"
html,?body?{?height:?100%;?width:?100%;?text-align:center;?}
/style
script?src="jquery-1.9.1.js"/script
script
//這段代?主要是獲取攝像頭的視頻流并顯示在Video?簽中
var?canvas=null,context=null,video=null;
window.addEventListener("DOMContentLoaded",?function?()
{
try{
canvas?=?document.getElementById("canvas");
context?=?canvas.getContext("2d");
video?=?document.getElementById("video");
var?videoObj?=?{?"video":?true,audio:false},
flag=true,
MediaErr?=?function?(error)
{
flag=false;
if?(error.PERMISSION_DENIED)
{
alert('用戶拒絕了瀏覽器請求媒體的權(quán)限',?'提示');
}?else?if?(error.NOT_SUPPORTED_ERROR)?{
alert('對不起，您的瀏覽器不支持拍照功能，請使用其他瀏覽器',?'提示');
}?else?if?(error.MANDATORY_UNSATISFIED_ERROR)?{
alert('指定的媒體類型未接收到媒體流',?'提示');
}?else?{
alert('系統(tǒng)未能獲取到攝像頭，請確保攝像頭已正確安裝。或嘗試刷新頁面，重試',?'提示');
}
};
//獲取媒體的兼容代碼，目前只支持（Firefox,Chrome,Opera）
if?(navigator.getUserMedia)
{
//qq瀏覽器不支持
if?(navigator.userAgent.indexOf('MQQBrowser')??-1)?{
alert('對不起，您的瀏覽器不支持拍照功能，請使用其他瀏覽器',?'提示');
return?false;
}
navigator.getUserMedia(videoObj,?function?(stream)?{
video.src?=?stream;
video.play();
},?MediaErr);
}
else?if(navigator.webkitGetUserMedia)
{
navigator.webkitGetUserMedia(videoObj,?function?(stream)
{
video.src?=?window.webkitURL.createObjectURL(stream);
video.play();
},?MediaErr);
}
else?if?(navigator.mozGetUserMedia)
{
navigator.mozGetUserMedia(videoObj,?function?(stream)?{
video.src?=?window.URL.createObjectURL(stream);
video.play();
},?MediaErr);
}
else?if?(navigator.msGetUserMedia)
{
navigator.msGetUserMedia(videoObj,?function?(stream)?{
$(document).scrollTop($(window).height());
video.src?=?window.URL.createObjectURL(stream);
video.play();
},?MediaErr);
}else{
alert('對不起，您的瀏覽器不支持拍照功能，請使用其他瀏覽器');
return?false;
}
if(flag){
alert('為了獲得更準(zhǔn)確的測試結(jié)果，請盡量將二維碼置于框中，然后進行拍攝、掃描。?請確保瀏覽器有權(quán)限使用攝像功能');
}
//這個是拍照按鈕的事件，
$("#snap").click(function?()?{startPat();}).show();
}catch(e){
printHtml("瀏覽器不支持HTML5?CANVAS");
}
},?false);
//打印內(nèi)容到頁面
function?printHtml(content){
$(window.document.body).append(content+"br/");
}
//開始拍照
function?startPat(){
setTimeout(function(){//防止調(diào)用過快
if(context)
{
context.drawImage(video,?0,?0,?320,?320);
CatchCode();
}
},200);
}
//抓屏獲取圖像流，并上傳到服務(wù)器
function?CatchCode()?{
if(canvas!=null)
{
//以下開始編?數(shù)據(jù)
var?imgData?=?canvas.toDataURL();
//將圖像轉(zhuǎn)換為base64數(shù)據(jù)
var?base64Data?=?imgData;//.substr(22);?//在前端截取22位之后的字符串作為圖像數(shù)據(jù)
//開始異步上
$.post("saveimg.php",?{?"img":?base64Data?},function?(result)
{
printHtml("解析結(jié)果："+result.data);
if?(result.status?==?"success"??result.data!="")
{
printHtml("解析結(jié)果成功！");
}else{
startPat();//如果沒有解析出來則重新抓拍解析
}
},"json");
}
}
/script
body
div?id="support"/div
div?id="contentHolder"
video?id="video"?width="320"?height="320"?autoplay
/video
canvas?style="display:none;?background-color:#F00;"?id="canvas"?width="320"?height="320"
/canvas?br/
button?id="snap"?style="display:none;?height:50px;?width:120px;"開始掃描/button
/div
/body/html
網(wǎng)頁標(biāo)題：html5掃描,css掃描
網(wǎng)站地址：http://m.jiaotiyi.com/article/dscoddh.html