可以。
成都創(chuàng)新互聯(lián)公司于2013年開(kāi)始,是專業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司,擁有項(xiàng)目成都做網(wǎng)站、網(wǎng)站設(shè)計(jì)、外貿(mào)營(yíng)銷網(wǎng)站建設(shè)網(wǎng)站策劃,項(xiàng)目實(shí)施與項(xiàng)目整合能力。我們以讓每一個(gè)夢(mèng)想脫穎而出為使命,1280元潁東做網(wǎng)站,已為上家服務(wù),為潁東各地企業(yè)和個(gè)人服務(wù),聯(lián)系電話:028-86922220
實(shí)現(xiàn)基本步驟:
操作攝像頭,獲取圖片。
技術(shù)要點(diǎn):MediaStream、GetUserMedia、File api。
利用canvas使用相關(guān)算法分析圖片識(shí)別圖片得出結(jié)果。
技術(shù)要點(diǎn):getImageData
* 涉及到的技術(shù)點(diǎn)瀏覽器們(包括移動(dòng)端)支持各異,現(xiàn)階段要開(kāi)發(fā)并投產(chǎn)還不太現(xiàn)實(shí)
* 識(shí)別算法是一個(gè)難點(diǎn),不過(guò)謝謝github,謝謝開(kāi)源社區(qū),@Shou Jiesong 的答案中有phonegap的插件地址,支持各種碼。
掃描二維碼的話,取決于手機(jī)攝像頭。
Html5文件的話,你需要將制作好的二維碼圖片放在Html5內(nèi)容里面。
將建好的網(wǎng)址加在微信公眾號(hào),或者是QQ公眾的導(dǎo)航上面,或者是網(wǎng)站里面。
當(dāng)點(diǎn)擊進(jìn)入頁(yè)面之后,會(huì)看到二維碼圖片。
用手機(jī)按壓圖片,APP會(huì)提示掃描圖片中的二維碼?
點(diǎn)擊確定掃描二維碼即可。
注釋:圖片盡量做成像下圖一樣的,增強(qiáng)二維碼的趣味性,吸引其他人掃描。
html5移動(dòng)端調(diào)用手機(jī)攝像頭掃描二維碼并獲取二維碼信息代碼如下:
[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('用戶拒絕了瀏覽器請(qǐng)求媒體的權(quán)限',?'提示');
}?else?if?(error.NOT_SUPPORTED_ERROR)?{
alert('對(duì)不起,您的瀏覽器不支持拍照功能,請(qǐng)使用其他瀏覽器',?'提示');
}?else?if?(error.MANDATORY_UNSATISFIED_ERROR)?{
alert('指定的媒體類型未接收到媒體流',?'提示');
}?else?{
alert('系統(tǒng)未能獲取到攝像頭,請(qǐng)確保攝像頭已正確安裝?;驀L試刷新頁(yè)面,重試',?'提示');
}
};
//獲取媒體的兼容代碼,目前只支持(Firefox,Chrome,Opera)
if?(navigator.getUserMedia)
{
//qq瀏覽器不支持
if?(navigator.userAgent.indexOf('MQQBrowser')??-1)?{
alert('對(duì)不起,您的瀏覽器不支持拍照功能,請(qǐng)使用其他瀏覽器',?'提示');
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('對(duì)不起,您的瀏覽器不支持拍照功能,請(qǐng)使用其他瀏覽器');
return?false;
}
if(flag){
alert('為了獲得更準(zhǔn)確的測(cè)試結(jié)果,請(qǐng)盡量將二維碼置于框中,然后進(jìn)行拍攝、掃描。?請(qǐng)確保瀏覽器有權(quán)限使用攝像功能');
}
//這個(gè)是拍照按鈕的事件,
$("#snap").click(function?()?{startPat();}).show();
}catch(e){
printHtml("瀏覽器不支持HTML5?CANVAS");
}
},?false);
//打印內(nèi)容到頁(yè)面
function?printHtml(content){
$(window.document.body).append(content+"br/");
}
//開(kāi)始拍照
function?startPat(){
setTimeout(function(){//防止調(diào)用過(guò)快
if(context)
{
context.drawImage(video,?0,?0,?320,?320);
CatchCode();
}
},200);
}
//抓屏獲取圖像流,并上傳到服務(wù)器
function?CatchCode()?{
if(canvas!=null)
{
//以下開(kāi)始編?數(shù)據(jù)
var?imgData?=?canvas.toDataURL();
//將圖像轉(zhuǎn)換為base64數(shù)據(jù)
var?base64Data?=?imgData;//.substr(22);?//在前端截取22位之后的字符串作為圖像數(shù)據(jù)
//開(kāi)始異步上
$.post("saveimg.php",?{?"img":?base64Data?},function?(result)
{
printHtml("解析結(jié)果:"+result.data);
if?(result.status?==?"success"??result.data!="")
{
printHtml("解析結(jié)果成功!");
}else{
startPat();//如果沒(méi)有解析出來(lái)則重新抓拍解析
}
},"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;"開(kāi)始掃描/button
/div
/body/html