Dynamic Web TWAIN是一個專為Web應用程序設計的TWAIN掃描識別控件。你只需在TWAIN接口寫幾行代碼，就可以用兼容TWAIN的掃描儀掃描文檔或從數碼相機/采集卡中獲取圖像。然后用戶可以編輯圖像并將圖像保存為多種格式，用戶可保存圖像到遠程數據庫或者SharePoint。該TWAIN控件還支持上傳和處理本地圖像。
本文匯集了一些Dynamic Web TWAIN編程方面的常見問題，并且針對這些問題進行了回答，感興趣的朋友快來了解一下吧~
點擊下載Dynamic Web TWAIN正式版
通常，在進行條形碼檢測時，我們會將以RGB或YUV編碼的彩色圖像傳遞給一些條形碼解碼API，其中圖像數據將從彩色轉換為灰度，然后從灰度轉換為二進制。操作像素會占用大量CPU時間。為了加速圖像處理，我們可以利用GPU。Dynamsoft JavaScript條碼SDK具有強大的功能，可用于開發Web條碼掃描應用程序，但到目前為止，它僅適用于CPU。在本文中，我將向您展示如何使用WebGL將彩色圖像轉換為灰度圖像，以減少從Web應用程序中的攝像頭視頻流讀取條形碼時的總CPU時間成本。
在5分鐘內構建Web條形碼掃描應用程序
Dynamsoft JavaScript條形碼SDK可在npmjs.com上獲得：
//www.npmjs.com/package/dynamsoft-javascript-barcode
“ hello world”示例非常簡單：
<!DOCTYPE html>
<html>
<body>
<script src="http://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@7.4.0-v1/dist/dbr.js" data-productKeys="PRODUCT-KEYS"></script>
<script>
let scanner = null;
(async()=>{
scanner = await Dynamsoft.BarcodeScanner.createInstance();
scanner.onFrameRead = results => {console.log(results);};
scanner.onUnduplicatedRead = (txt, result) => {alert(txt);};
await scanner.show();
})();
</script>
</body>
</html>
運行代碼時，您可以在開發人員控制臺中查看相機視圖并檢查條形碼讀取結果。該BarcodeScanner類所做的一切都是為了你。
另外，您可以從視頻元素中手動讀取圖像數據，并使用BarcodeReader類以編程方式調用encodeBuffer（）方法：
var barcodereader = null;
(async()=>{
barcodereader = await Dynamsoft.BarcodeReader.createInstance();
await barcodereader.updateRuntimeSettings('speed');
let settings = await barcodereader.getRuntimeSettings();
settings.deblurLevel = 0;
barcodereader.updateRuntimeSettings(settings);
})();
let canvas2d = document.createElement('canvas');
canvas2d.width = width;
canvas2d.height = height;
var ctx2d = canvas2d.getContext('2d');
ctx2d.drawImage(videoElement, 0, 0, width, height);
buffer = ctx2d.getImageData(0, 0, width, height).data;
if (barcodereader){
barcodereader
.decodeBuffer(
buffer,
width,
height,
width * 4,
Dynamsoft.EnumImagePixelFormat.IPF_ARGB_8888
)
.then((results) => {
showResults(results);
});
}
使用WebGL將視頻色框轉換為灰度圖像
從理論上講，相同尺寸的灰度圖像的處理速度要快于彩色圖像，因為彩色圖像有4個通道，而灰度圖像只有1個通道。如果緩沖區是灰度圖像，則可以如下更改上面的代碼：
barcodereader
.decodeBuffer(
gray,
width,
height,
width,
Dynamsoft.EnumImagePixelFormat.IPF_GrayScaled
)
.then((results) => {
showResults(results);
});
下一個問題是如何使用WebGL獲取灰度圖像緩沖區？我發現一個名為WebGLFundamentals的網站 對于學習WebGL很方便。
首先，我創建了一個著色器程序以將顏色轉換為灰度：
<!-- //gist.github.com/Volcanoscar/4a9500d240497d3c0228f663593d167a -->
<script id="drawImage-fragment-shader" type="x-shader/x-fragment">
precision mediump float;
varying vec2 v_texcoord;
uniform sampler2D u_texture;
uniform float u_colorFactor;
void main() {
vec4 sample = texture2D(u_texture, v_texcoord);
float grey = 0.21 * sample.r + 0.71 * sample.g + 0.07 * sample.b;
gl_FragColor = vec4(sample.r * u_colorFactor + grey * (1.0 - u_colorFactor), sample.g * u_colorFactor + grey * (1.0 - u_colorFactor), sample.b * u_colorFactor + grey * (1.0 - u_colorFactor), 1.0);
}
</script>
接下來，我使用在線教程提供的draw（）函數將視頻元素綁定到WebGL紋理：
var drawInfo = {
x: 0,
y: 0,
dx: 1,
dy: 1,
textureInfo: loadImageAndCreateTextureInfo(videoElement)
};
draw(drawInfo);
然后，我將圖像數據讀取到Uint8Array：
buffer = new Uint8Array(width * height * 4);
gl.readPixels(
0,
0,
gl.drawingBufferWidth,
gl.drawingBufferHeight,
gl.RGBA,
gl.UNSIGNED_BYTE,
buffer
);
有趣的是輸出圖像是顛倒的。要沿其垂直軸翻轉圖像數據，可以調用gl.pixelStorei（）：
function drawImage(tex, texWidth, texHeight, dstX, dstY) {
gl.bindTexture(gl.TEXTURE_2D, tex);
gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);
最后，從緩沖區中提取灰度數據：
gray = new Uint8Array(width * height);
let gray_index = 0;
for (i = 0; i < width * height * 4; i += 4) { gray[gray_index++] = buffer[i]; }
這是在我的網絡瀏覽器中運行該應用程序的屏幕截圖。
條形碼解碼性能比較：灰度圖像與彩色圖像
要衡量性能差異，我們可以使用以下公式：
total time = image data obtaining time + barcode decoding time
我對640×480視頻流進行了簡單測試。
如您所見，在我的PC上從WebGL（灰度圖像）獲取圖像數據的時間成本比從畫布（彩色圖像）獲取圖像數據的時間成本大約慢5倍，因為GPU數據傳輸需要時間。但是，使用WebGL進行條形碼解碼的總CPU時間成本較低。
想要購買Dynamic Web TWAIN正版授權，或了解更多產品信息請點擊
標簽：
本站文章除注明轉載外，均為本站原創或翻譯。歡迎任何形式的轉載，但請務必注明出處、不得修改原文相關鏈接，如果存在內容上的異議請郵件反饋至chenjj@ke049m.cn
文章轉載自：
半島外圍網上直營 
4次
相關產品
正式授權
最新文章 
半島外圍網上直營相關的文章 
微信
在線咨詢
渝公網安備
50010702500608號
客服熱線