html掃描條形碼插件
1、如何實現掃描條形碼以後自動搜索資料庫所需要的數據
「初步思路」必須拋棄,完全舍棄。最直接的最高效的做法,就是在此什麼都不做。什麼都不做,是最快的。
發送消息如果是一個獨立的機制,那麼當一個業務邏輯過程要推送消息時,就直接調用發送消息服務介面就行了。根本不糾結是否跟資料庫有關的問題。
2、如何用js實現調用手機攝像頭掃描條形碼然後帶出條形碼的值到文本框
1、開啟溝子的方法代碼。
2、指定輸入間隔為300毫秒以內時為連續輸入方法代碼。
3、記錄按鍵信息方法代碼。
4、事件的狀態代碼方法。
5、因為條形碼中只有數字和部分符號,所以基本可以不用考慮鍵盤狀態或組合鍵的情況,但二維碼就不能不考慮了。
6、可以使用_keydown.Contains(160)判斷是否按下了Shift鍵,然後使用ShiftChar方法來獲取最終的按鍵對應字元至於結果保存,我使用了一個數組List<List<EventMsg>>,對每次輸入都單獨進行記錄。
3、求助,html5+js實現條碼掃描並返回掃描結果
單純的html5+js不可能,首先沒有掃描設備介面,其次無法對圖像進行像素化讀取。
建議你藉助activeX控制項。
4、用HTML5 可以實現二維碼掃描識別的功能嗎
可以。
實現來基本步驟:
操作攝源像頭,獲取圖片。
技術要點:MediaStream、GetUserMedia、File api。
利用canvas使用相關演算法分析圖片識別圖片得出結果。
技術要點:getImageData
* 涉及到的技術點瀏覽器們(包括移動端)支持各異,現階段要開發並投產還不太現實
* 識別演算法是一個難點,不過謝謝github,謝謝開源社區,@Shou Jiesong 的答案中有phonegap的插件地址,支持各種碼。
5、html5移動端頁面上調用手機攝像頭掃描二維碼並獲取二維碼信息代碼?
首先感謝 jsqrcode 的開發者,提供這么優秀的解析二維碼的代碼,為我減少了很大的工作量。jsqrcode 地址 百度
我的代碼庫地址百度
1.解決的問題:
1.能夠在微博客戶端呼起攝像頭掃描二維碼並且解析;
2.能夠在原生瀏覽器和微信客戶端中掃描二維碼並且解析;
2.優點:
web端或者是 h5端可以直接完成掃碼的工作;
3.缺點:
圖片不清晰很容易解析失敗(拍照掃描圖片需要鏡頭離二維碼的距離很近),相對於 native 呼起的攝像頭解析會有1-2秒的延時。
說明:
此插件需要配合zepto.js 或者 jQuery.js使用
使用方法:
1.在需要使用的頁面按照下面順序引入lib目錄下的 js 文件
復制代碼
代碼如下:
<script src="lib/zepto.js"></script>
<script src="lib/qrcode.lib.min.js"></script>
<script src="lib/qrcode.js"></script>
2.自定義按鈕的 html 樣式
因為該插件需要使用<input type="file" /> ,該 html 結構在網頁上面是有固定的顯示樣式,為了能夠自定義按鈕樣式,我們可以按照下面的示例代碼結構嵌套代碼
復制代碼
代碼如下:
<div class="qr-btn" node-type="jsbridge">掃描二維碼1
<input node-type="jsbridge" type="file" name="myPhoto" value="掃描二維碼1" />
</div>
然後設置 input 按鈕的 css 隱藏按鈕,比如我使用的是屬性選擇器
復制代碼
代碼如下:
input[node-type=jsbridge]{
visibility: hidden;
}
這里我們只需要按照自己的需要定義class="qr-btn"的樣式即可。
3.在頁面上初始化 Qrcode 對象
復制代碼
代碼如下:
//初始化掃描二維碼按鈕,傳入自定義的 node-type 屬性
$(function() {
Qrcode.init($('[node-type=jsbridge]'));
});
主要代碼解析
復制代碼
代碼如下:
(function($) {
var Qrcode = function(tempBtn) {
//該對象只支持微博域下的解析,也就是說不是微博域下的頁面只能用第二種方案解析二維碼
if (window.WeiboJSBridge) {
$(tempBtn).on('click', this.weiBoBridge);
} else {
$(tempBtn).on('change', this.getImgFile);
}
};
Qrcode.prototype = {
weiBoBridge: function() {
WeiboJSBridge.invoke('scanQRCode', null, function(params) {
//得到掃碼的結果
location.href=params.result;
});
},
getImgFile: function() {
var _this_ = this;
var imgFile = $(this)[0].files;
var oFile = imgFile[0];
var oFReader = new FileReader();
var rFilter = /^(?:image\/bmp|image\/cis\-cod|image\/gif|image\/ief|image\/jpeg|image\/jpeg|image\/jpeg|image\/pipeg|image\/png|image\/svg\+xml|image\/tiff|image\/x\-cmu\-raster|image\/x\-cmx|image\/x\-icon|image\/x\-portable\-anymap|image\/x\-portable\-bitmap|image\/x\-portable\-graymap|image\/x\-portable\-pixmap|image\/x\-rgb|image\/x\-xbitmap|image\/x\-xpixmap|image\/x\-xwindowmp)$/i;
if (imgFile.length === 0) {
return;
}
if (!rFilter.test(oFile.type)) {
alert("選擇正確的圖片格式!");
return;
}
//讀取圖片成功後執行的代碼
oFReader.onload = function(oFREvent) {
qrcode.decode(oFREvent.target.result);
qrcode.callback = function(data) {
//得到掃碼的結果
location.href = data;
};
};
oFReader.readAsDataURL(oFile);
},
destory: function() {
$(tempBtn).off('click');
}
};
//初始化
Qrcode.init = function(tempBtn) {
var _this_ = this;
var inputDom;
tempBtn.each(function() {
new _this_($(this));
});
$('[node-type=qr-btn]').on('click', function() {
$(this).find('[node-type=jsbridge]')[0].click();
});
};
window.Qrcode = Qrcode;
})(window.Zepto ? Zepto : jQuery);
6、js + html5 + java 實現二維碼和條形碼掃描.怎麼用js調用攝像頭
不明白你的意圖,你是開發GUI還是APP
如果是APP有很多支持的API
HBuilder就有調用原生硬體的介面html5++
<!DOCTYPE html><html>
<head>
<meta charset="utf-8">
<title>Camera Example</title>
<script type="text/javascript">
// 擴展API載入完畢後調用onPlusReady回調函數
document.addEventListener( "plusready", onPlusReady, false );
var r = null;
// 擴展API載入完畢,現在可以正常調用擴展API
function onPlusReady() {
// 獲取設備默認的攝像頭對象
var cmr = plus.camera.getCamera();
// ......
}
</script>
</head>
<body>
</body>
</html>