當前位置:首頁 » 網頁前端 » web掃碼
擴展閱讀
webinf下怎麼引入js 2023-08-31 21:54:13
堡壘機怎麼打開web 2023-08-31 21:54:11

web掃碼

發布時間: 2022-01-16 08:44:28

A. 如何在web頁面讀取二維碼內容

1、將下列文件拷貝到系統system32目錄
dllEan13Decode.dll
libiconv-2.dll
libzbar-0.dll
PropSdk.dll
LbDecode.ocx
dll的調用方法
函數:bOpenUsb20Video();
說明:打開識讀器設備
函數:sGetBarData();
說明:獲取掃碼成功結果
函數:bCloseUsb20();
說明:關閉識讀器事件:OnRecvBar();
2、注冊控制項
regsvr32 C:\WINDOWS\system32\LbDecode.ocx
3、編寫html代碼<html<head<titleWEB驗證二維碼範例</title
<script language=javascript
function download1(){// return value ; 5--埠被佔用,2--埠不存在, 0-- 成功
document.form1.text1.value=ActiveXDown.bOpenUsb20Video();return;}</script
<script language=JavaScript for=ActiveXDown Event=OnRecvBar
document.form1.text2.value=ActiveXDown.sGetBarData();
</script</head<body<OBJECT ID=ActiveXDown
CLASSID=CLSID:3CFCDE00-47A7-4674-8071-7F7FCDDF506F
CODEBASE=LbDecode.ocx#version=1,0,0,0 width=0 height=0
</OBJECT<center<form name=form1
埠狀況:<input type=text name=text1 size=50 value=<p
5--埠被佔用,2--埠不存在, 0-- 成功 1-- 失敗<p

B. 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>

C. h5 js或者jquery實現二維碼掃描功能 求demo

首先,掃描二維碼需要調用手機攝像頭,而網頁本身是沒法直接驅動硬體的;
SO:以Android為例:你可以用JS通過WebView調用Java方法,Java方法裡面去寫調用攝像頭掃碼二維碼事件,將掃描結果在通過webview回傳。

D. 用釘釘掃碼登錄的web程序怎麼實現自動化測試

1.建立伺服器
我們可以在資料庫中建一個qrlogin的表來保存key,比如我們建這樣的一個表

其中qrl_guid就是登錄的key,登錄後的標識flag就是qrl_dingDingUserId(釘釘用戶的ID)。
2.生成二維碼
二維碼的生成可以使用相關的庫,比如.net的可以用thoughtworks.qrcode.dll,生成的字元串是htttp://www.xxx.com/qrlogin.html?key=生成的GUID,代碼如下

[csharp] view plain
string enCodeString = "http://www.xxx.com/qrlogin.html?key=" + key;
QRCodeEncoder qrCodeEncoder = new QRCodeEncoder();
Bitmap qrBmp = qrCodeEncoder.Encode(enCodeString, Encoding.UTF8);
其中key需要先將其插入到資料庫表TQRLogin中。

3.qrlogin.html頁面
在使用釘釘掃一掃進入到qrlogin.html頁面後,我們不只需要得到url中的key,還需要得到該用戶的信息,為此需要jsapi的票據,然後配置要調用的jsapi,比如dd.runtime.permission.requestAuthCode,再通過該函數得到用戶的信息,示例代碼如下

[javascript] view plain

E. 有沒有好的websocket 微信掃碼登陸實現方案

所以針對第一點,我們的關鍵在於,在掃描前要確保用戶是已經被驗證過且合法的用戶(驗證方式可以是用戶名+密碼,也可以是一個secure key),在選擇是否登錄時將這個結果一並推送到伺服器端,就好了。如果用戶沒有驗證是否合法,可以像微信的處理方式一樣直接告訴用戶二維碼不可識別或提示請先登錄到app。

F. 求java web項目使用html5調用手機攝像頭掃描二維碼並獲取二維碼信息代碼

需要載入cordova.js 方法: document.addEventListener("deviceready", onDeviceReady, false); function onDeviceReady() { pictureSource = navigator.camera.PictureSourceType; destinationType = navigator.camera.DestinationType; } //相...

G. 怎麼用WebView訪問掃描到的二維碼信息

掃描二維碼從頭到位都是攝像頭在做,跟webview沒有一毛錢的關系,你最多也是網頁調用攝像頭掃描二維碼。

在android studio裡面我們掃描二維碼要引入zxing包項目文件,File->New->Import Mole里導入。

引入過後我們寫代碼:

Buttonbtn;
TextViewte;
@Override
protectedvoidonCreate(BundlesavedInstanceState){
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
btn=(Button)findViewById(R.id.btn);
te=(TextView)findViewById(R.id.te);
btn.setOnClickListener(newView.OnClickListener(){
@Override
publicvoidonClick(Viewview){
if(ContextCompat.checkSelfPermission(MainActivity.this,Manifest.permission.CAMERA)
!=PackageManager.PERMISSION_GRANTED){
//申請WRITE_EXTERNAL_STORAGE許可權
ActivityCompat.requestPermissions(MainActivity.this,newString[]{Manifest.permission.CAMERA},
1);}//這一塊紅色的是開啟手機里的相機許可權,安卓6.0以後的系統需要,否則會報錯
Intentintent=newIntent(MainActivity.this,CaptureActivity.class);//CaptureActivity是第三方類庫裡面的類
startActivityForResult(intent,0);
}
});
}
//這個方法是用來獲取從另一個界面傳回的值的,有不明白這個方法的作用和Intent類的使用的可以看另外一篇博客安卓的組件載體Intent
@Override
protectedvoidonActivityResult(intrequestCode,intresultCode,Intentdata){
super.onActivityResult(requestCode,resultCode,data);
if(resultCode==RESULT_OK){
Strings=data.getStringExtra("result");//這個result是在第三方類庫裡面定義的key
te.setText(s);//往文本框輸入結果
}
}

H. w10系統怎麼啟用 Web 掃描

方法/步驟

  • 1.通過在IE瀏覽器中輸入列印機IP地址登錄web頁面, 事先必須要設置掃描安全性,否則無法實現此功能.

I. 手機web頁面怎麼調用攝像頭執行掃描,獲取數據

HTML5技術支持WebApp在手機上拍照,顯示在頁面上並上傳到伺服器。這是手機微博應用中常見的功能,當然你也可以在其它類型應用中適當使用此技術。
1、 視頻流
HTML5 的 The Media Capture(媒體捕捉) API 提供了對攝像頭的可編程訪問,用戶可以直接用 getUserMedia(請注意目前僅Chrome和Opera支持)獲得攝像頭提供的視頻流。我們需要做的是添加一個HTML5 的 Video 標簽,並將從攝像頭獲得的視頻作為這個標簽的輸入來源。
<video id=」video」 autoplay=」"></video>
<script>
var video_element=document.getElementById(『video』);
if(navigator.getUserMedia){ // opera應使用opera.getUserMedianow
navigator.getUserMedia(『video』,success,error); //success是回調函數,當然你也可以直接在此寫一個匿名函數
}
function success(stream){
video_element.src=stream;
}
</script>
此時,video 標簽內將顯示動態的攝像視頻流。下面需要進行拍照了。
2、 拍照
拍照是採用HTML5的Canvas功能,實時捕獲Video標簽的內容,因為Video元素可以作為Canvas圖像的輸入,所以這一點很好實現。主要代碼如下:

var canvas=document.createElement(『canvas』); //動態創建畫布對象
var ctx=canvas.getContext(』2d』);
var cw=vw,ch=vh;
ctx.fillStyle=」#ffffff」;
ctx.fillRect(0,0,cw,ch);
ctx.drawImage(video_element,0,0,cw,ch,0,0,vw,vh); //將video對象內指定的區域捕捉繪制到畫布上指定的區域,可進行不等大不等位的繪制。
document.body.append(canvas);

3、 圖片獲取
從Canvas獲取圖片數據的核心思路是用canvas的toDataURL將Canvas的數據轉換為base64位編碼的PNG圖像,類似於「data:image/png;base64,xxxxx」的格式。
var imgData=canvas.toDataURL(「image/png」);

這樣,imgData變數就存儲了一長串的字元數據內容,表示的就是一個PNG圖像的base64編碼。因為真正的圖像數據是base64編碼逗號之後的部分,所以要讓實際伺服器接收的圖像數據應該是這部分,我們可以用兩種辦法來獲取。
第一種:是在前端截取22位以後的字元串作為圖像數據,例如:
var data=imgData.substr(22);

如果要在上傳前獲取圖片的大小,可以使用:
var length=atob(data).length; //atob 可解碼用base-64解碼的字串

第二種:是在後端獲取傳輸的數據後用後台語言截取22位以後的字元串(也就是在前台略過上面這步直接上傳)。例如PHP里:
$image=base64_decode(str_replace(『data:image/jpeg;base64,』,」,$data);

4、 圖片上傳
在前端可以使用Ajax將上面獲得的圖片數據上傳到後台腳本。例如使用jQuery時可以用:
$.post(『upload.php』,{『data』:data});

在後台我們用PHP腳本接收數據並存儲為圖片。
function convert_data($data){
$image=base64_decode(str_replace(『data:image/jpeg;base64,』,」,$data);
save_to_file($image);
}
function save_to_file($image){
$fp=fopen($filename,』w');
fwrite($fp,$image);
fclose($fp);
}