1. 前端可以實現二維碼掃了操作的事情么
和後端是啥沒有關系,前端做websocket長連接/flashsocket長連接/ajaxpoll模擬長連接即可
2. 手機掃描二維碼傳輸文件到電腦如何實現
手機掃描二維碼傳輸文件到電腦的實現原理為:
用戶在PC端發出手機上傳的請求,後端收到請求以後,開始拼裝二維碼信息,並將二維碼信息製作成二維碼圖片以流輸出,或將信息交給前端製作圖片,二維碼掃描後的信息,既上傳文件頁面的URL,掃碼打開URL,進行判斷。
從安全形度考慮,暴露在二維碼中的信息,越少越好。可以只留下URL及業務路徑、二維碼的ID,其他信息讓業務去處理。
掃碼後會有二維碼過期判斷,就是二維碼的掃描內容是有時間限制的,在約定時間之外則會失效。
而後程序會編寫是否可上傳判斷。在很多業務中,不是所有的情況都可以上傳附件,或者其他判斷,例如當前用戶在PC端是否為成功登錄狀態。
對於這些流程的判斷,可能需要一個表,來存儲由二維碼ID關聯的結果。也推薦使用一些緩存來存儲二維碼信息,畢竟二維碼是具有有效期的,無需持久化。
(2)前端掃描二維碼擴展閱讀:
二維碼本質本質是一個URL,用戶可以通過任何或者我們指定的掃碼工具打開上傳二維碼指向的鏈接。掃碼後,將用戶引入專門製作的移動端頁面,通過二維碼ID與後端進行交互。
請求頁面成功時,應當返回一些信息,這些信息提示用戶在給誰上傳什麼材料,以避免用戶錯誤上傳。
用戶確認無誤後,可以點擊按鈕,通過手機的文件瀏覽器上傳文件。此時會使用PC端相同的邏輯預先判斷後綴名等文件信息。提前攔截不合規的文件。
3. 二維碼付款或者登陸用到哪些前端技術應用。用手機app掃描PC端二維碼後,PC端自動監測到掃描結果
移動互聯網的發展,二維碼成為最重要的入口和工具
微信要做的是快速完成的二維碼普及教育和用戶的習慣養成
web端的二維碼登陸,不在於有多便捷(其實未必方便),不在於將來在web端推登陸標准
重點在於,每個用戶都學會並習慣於打開微信,點擊右上角按鈕,選擇Scan QR Code!
4. html5移動端頁面上調用手機攝像頭掃描二維碼並獲取二維碼信息代碼
html5移動端調用手機攝像頭掃描二維碼並獲取二維碼信息代碼如下:
[html]view plain
<!DOCTYPEhtml>
<html><head>
<title>HTML5codeReader</title>
<metahttp-equiv="Content-Type"content="text/html;charset=gb2312">
</head>
<styletype="text/css">
html,body{height:100%;width:100%;text-align:center;}
</style>
<scriptsrc="jquery-1.9.1.js"></script>
<script>
//這段代主要是獲取攝像頭的視頻流並顯示在Video簽中
varcanvas=null,context=null,video=null;
window.addEventListener("DOMContentLoaded",function()
{
try{
canvas=document.getElementById("canvas");
context=canvas.getContext("2d");
video=document.getElementById("video");
varvideoObj={"video":true,audio:false},
flag=true,
MediaErr=function(error)
{
flag=false;
if(error.PERMISSION_DENIED)
{
alert('用戶拒絕了瀏覽器請求媒體的許可權','提示');
}elseif(error.NOT_SUPPORTED_ERROR){
alert('對不起,您的瀏覽器不支持拍照功能,請使用其他瀏覽器','提示');
}elseif(error.MANDATORY_UNSATISFIED_ERROR){
alert('指定的媒體類型未接收到媒體流','提示');
}else{
alert('系統未能獲取到攝像頭,請確保攝像頭已正確安裝。或嘗試刷新頁面,重試','提示');
}
};
//獲取媒體的兼容代碼,目前只支持(Firefox,Chrome,Opera)
if(navigator.getUserMedia)
{
//qq瀏覽器不支持
if(navigator.userAgent.indexOf('MQQBrowser')>-1){
alert('對不起,您的瀏覽器不支持拍照功能,請使用其他瀏覽器','提示');
returnfalse;
}
navigator.getUserMedia(videoObj,function(stream){
video.src=stream;
video.play();
},MediaErr);
}
elseif(navigator.webkitGetUserMedia)
{
navigator.webkitGetUserMedia(videoObj,function(stream)
{
video.src=window.webkitURL.createObjectURL(stream);
video.play();
},MediaErr);
}
elseif(navigator.mozGetUserMedia)
{
navigator.mozGetUserMedia(videoObj,function(stream){
video.src=window.URL.createObjectURL(stream);
video.play();
},MediaErr);
}
elseif(navigator.msGetUserMedia)
{
navigator.msGetUserMedia(videoObj,function(stream){
$(document).scrollTop($(window).height());
video.src=window.URL.createObjectURL(stream);
video.play();
},MediaErr);
}else{
alert('對不起,您的瀏覽器不支持拍照功能,請使用其他瀏覽器');
returnfalse;
}
if(flag){
alert('為了獲得更准確的測試結果,請盡量將二維碼置於框中,然後進行拍攝、掃描。請確保瀏覽器有許可權使用攝像功能');
}
//這個是拍照按鈕的事件,
$("#snap").click(function(){startPat();}).show();
}catch(e){
printHtml("瀏覽器不支持HTML5CANVAS");
}
},false);
//列印內容到頁面
functionprintHtml(content){
$(window.document.body).append(content+"<br/>");
}
//開始拍照
functionstartPat(){
setTimeout(function(){//防止調用過快
if(context)
{
context.drawImage(video,0,0,320,320);
CatchCode();
}
},200);
}
//抓屏獲取圖像流,並上傳到伺服器
functionCatchCode(){
if(canvas!=null)
{
//以下開始編數據
varimgData=canvas.toDataURL();
//將圖像轉換為base64數據
varbase64Data=imgData;//.substr(22);//在前端截取22位之後的字元串作為圖像數據
//開始非同步上
$.post("saveimg.php",{"img":base64Data},function(result)
{
printHtml("解析結果:"+result.data);
if(result.status=="success"&&result.data!="")
{
printHtml("解析結果成功!");
}else{
startPat();//如果沒有解析出來則重新抓拍解析
}
},"json");
}
}
</script>
<body>
<divid="support"></div>
<divid="contentHolder">
<videoid="video"width="320"height="320"autoplay>
</video>
<canvasstyle="display:none;background-color:#F00;"id="canvas"width="320"height="320">
</canvas><br/>
<buttonid="snap"style="display:none;height:50px;width:120px;">開始掃描</button>
</div>
</body></html>
5. 通過什麼方式可以掃二維碼體現一個附件
摘要 授權碼(authorization code)方式,指的是第三方應用先申請一個授權碼,然後再用該碼獲取令牌。
6. html5移動端調用手機攝像頭掃描二維碼並獲取二維碼信息代碼怎麼寫
html5移動端調用手機攝像頭掃描二維碼並獲取二維碼信息代碼如下:
[html]view plain
<!DOCTYPEhtml>
<html><head>
<title>HTML5codeReader</title>
<metahttp-equiv="Content-Type"content="text/html;charset=gb2312">
</head>
<styletype="text/css">
html,body{height:100%;width:100%;text-align:center;}
</style>
<scriptsrc="jquery-1.9.1.js"></script>
<script>
//這段代主要是獲取攝像頭的視頻流並顯示在Video簽中
varcanvas=null,context=null,video=null;
window.addEventListener("DOMContentLoaded",function()
{
try{
canvas=document.getElementById("canvas");
context=canvas.getContext("2d");
video=document.getElementById("video");
varvideoObj={"video":true,audio:false},
flag=true,
MediaErr=function(error)
{
flag=false;
if(error.PERMISSION_DENIED)
{
alert('用戶拒絕了瀏覽器請求媒體的許可權','提示');
}elseif(error.NOT_SUPPORTED_ERROR){
alert('對不起,您的瀏覽器不支持拍照功能,請使用其他瀏覽器','提示');
}elseif(error.MANDATORY_UNSATISFIED_ERROR){
alert('指定的媒體類型未接收到媒體流','提示');
}else{
alert('系統未能獲取到攝像頭,請確保攝像頭已正確安裝。或嘗試刷新頁面,重試','提示');
}
};
//獲取媒體的兼容代碼,目前只支持(Firefox,Chrome,Opera)
if(navigator.getUserMedia)
{
//qq瀏覽器不支持
if(navigator.userAgent.indexOf('MQQBrowser')>-1){
alert('對不起,您的瀏覽器不支持拍照功能,請使用其他瀏覽器','提示');
returnfalse;
}
navigator.getUserMedia(videoObj,function(stream){
video.src=stream;
video.play();
},MediaErr);
}
elseif(navigator.webkitGetUserMedia)
{
navigator.webkitGetUserMedia(videoObj,function(stream)
{
video.src=window.webkitURL.createObjectURL(stream);
video.play();
},MediaErr);
}
elseif(navigator.mozGetUserMedia)
{
navigator.mozGetUserMedia(videoObj,function(stream){
video.src=window.URL.createObjectURL(stream);
video.play();
},MediaErr);
}
elseif(navigator.msGetUserMedia)
{
navigator.msGetUserMedia(videoObj,function(stream){
$(document).scrollTop($(window).height());
video.src=window.URL.createObjectURL(stream);
video.play();
},MediaErr);
}else{
alert('對不起,您的瀏覽器不支持拍照功能,請使用其他瀏覽器');
returnfalse;
}
if(flag){
alert('為了獲得更准確的測試結果,請盡量將二維碼置於框中,然後進行拍攝、掃描。請確保瀏覽器有許可權使用攝像功能');
}
//這個是拍照按鈕的事件,
$("#snap").click(function(){startPat();}).show();
}catch(e){
printHtml("瀏覽器不支持HTML5CANVAS");
}
},false);
//列印內容到頁面
functionprintHtml(content){
$(window.document.body).append(content+"<br/>");
}
//開始拍照
functionstartPat(){
setTimeout(function(){//防止調用過快
if(context)
{
context.drawImage(video,0,0,320,320);
CatchCode();
}
},200);
}
//抓屏獲取圖像流,並上傳到伺服器
functionCatchCode(){
if(canvas!=null)
{
//以下開始編數據
varimgData=canvas.toDataURL();
//將圖像轉換為base64數據
varbase64Data=imgData;//.substr(22);//在前端截取22位之後的字元串作為圖像數據
//開始非同步上
$.post("saveimg.php",{"img":base64Data},function(result)
{
printHtml("解析結果:"+result.data);
if(result.status=="success"&&result.data!="")
{
printHtml("解析結果成功!");
}else{
startPat();//如果沒有解析出來則重新抓拍解析
}
},"json");
}
}
</script>
<body>
<divid="support"></div>
<divid="contentHolder">
<videoid="video"width="320"height="320"autoplay>
</video>
<canvasstyle="display:none;background-color:#F00;"id="canvas"width="320"height="320">
</canvas><br/>
<buttonid="snap"style="display:none;height:50px;width:120px;">開始掃描</button>
</div>
</body></html>
7. web掃碼登錄怎麼實現,思路是什麼
1.前端調用後台生成二維碼的API,獲取到二維碼圖片和所包含的信息(通常是一個唯一ID)
2.前端檢測(通過輪詢或者websock,自己選擇)是否有手機掃碼,通過調用後台介面API,參數為上面的唯一ID
3.手機掃描二維碼登陸,手機端可以獲取到二維碼里的信息ID,帶上當前登陸用戶ID和二維碼里的ID調用後台介面。
後台存儲這個二維碼的數據,加上登錄用戶信息,當前台調用API時,給返回登錄成功。
4.前端獲取到登錄成功,進行跳轉
8. 用HTML5 可以實現二維碼掃描識別的功能嗎
可以。
實現基本步驟:
操作攝像頭,獲取圖片。
技術要點:MediaStream、GetUserMedia、File api。
利用canvas使用相關演算法分析圖片識別圖片得出結果。
技術要點:getImageData
* 涉及到的技術點瀏覽器們(包括移動端)支持各異,現階段要開發並投產還不太現實
* 識別演算法是一個難點,不過謝謝github,謝謝開源社區,@Shou Jiesong 的答案中有phonegap的插件地址,支持各種碼。
9. php代碼如何實現掃描二維碼獲取掃描者的信息
1、首先創建一個名稱為erweima的php文件。
注意事項:
用PHP做出的動態頁面與其他的編程語言相比,PHP是將程序嵌入到HTML文檔中去執行,執行效率比完全生成HTML標記的CGI要高許多;PHP還可以執行編譯後代碼,編譯可以達到加密和優化代碼運行,使代碼運行更快。
10. 前端頁面怎麼判斷用戶已掃描二維碼
前端沒法判斷用戶是否掃描,只能後端處理。