午夜欧美成人久久久久,国产黄影院,九热在线观看高

Dynamic Web TWAIN教程：如何使用WebGL加快Web條形碼的解碼速度

翻譯|使用教程|編輯：楊鵬連|2020-07-30 10:09:48.027|閱讀 478 次

概述：在本文中，我將向您展示如何使用WebGL將彩色圖像轉(zhuǎn)換為灰度圖像，以減少從Web應(yīng)用程序中的攝像頭視頻流讀取條形碼時(shí)的總CPU時(shí)間成本。

Dynamic Web TWAIN是一個(gè)專為Web應(yīng)用程序設(shè)計(jì)的TWAIN掃描識(shí)別控件。你只需在TWAIN接口寫幾行代碼，就可以用兼容TWAIN的掃描儀掃描文檔或從數(shù)碼相機(jī)/采集卡中獲取圖像。然后用戶可以編輯圖像并將圖像保存為多種格式，用戶可保存圖像到遠(yuǎn)程數(shù)據(jù)庫或者SharePoint。該TWAIN控件還支持上傳和處理本地圖像。

本文匯集了一些Dynamic Web TWAIN編程方面的常見問題，并且針對(duì)這些問題進(jìn)行了回答，感興趣的朋友快來了解一下吧~

點(diǎn)擊下載Dynamic Web TWAIN正式版

通常，在進(jìn)行條形碼檢測(cè)時(shí)，我們會(huì)將以RGB或YUV編碼的彩色圖像傳遞給一些條形碼解碼API，其中圖像數(shù)據(jù)將從彩色轉(zhuǎn)換為灰度，然后從灰度轉(zhuǎn)換為二進(jìn)制。操作像素會(huì)占用大量CPU時(shí)間。為了加速圖像處理，我們可以利用GPU。Dynamsoft JavaScript條碼SDK具有強(qiáng)大的功能，可用于開發(fā)Web條碼掃描應(yīng)用程序，但到目前為止，它僅適用于CPU。在本文中，我將向您展示如何使用WebGL將彩色圖像轉(zhuǎn)換為灰度圖像，以減少從Web應(yīng)用程序中的攝像頭視頻流讀取條形碼時(shí)的總CPU時(shí)間成本。

在5分鐘內(nèi)構(gòu)建Web條形碼掃描應(yīng)用程序

Dynamsoft JavaScript條形碼SDK可在npmjs.com上獲得：

//www.npmjs.com/package/dynamsoft-javascript-barcode

“ hello world”示例非常簡(jiǎn)單：

<!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>
運(yùn)行代碼時(shí)，您可以在開發(fā)人員控制臺(tái)中查看相機(jī)視圖并檢查條形碼讀取結(jié)果。該BarcodeScanner類所做的一切都是為了你。

另外，您可以從視頻元素中手動(dòng)讀取圖像數(shù)據(jù)，并使用BarcodeReader類以編程方式調(diào)用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將視頻色框轉(zhuǎn)換為灰度圖像

從理論上講，相同尺寸的灰度圖像的處理速度要快于彩色圖像，因?yàn)椴噬珗D像有4個(gè)通道，而灰度圖像只有1個(gè)通道。如果緩沖區(qū)是灰度圖像，則可以如下更改上面的代碼：

barcodereader
        .decodeBuffer(
            gray,
            width,
            height,
            width,
            Dynamsoft.EnumImagePixelFormat.IPF_GrayScaled
        )
        .then((results) => {
            showResults(results);
        });

下一個(gè)問題是如何使用WebGL獲取灰度圖像緩沖區(qū)？我發(fā)現(xiàn)一個(gè)名為WebGLFundamentals的網(wǎng)站對(duì)于學(xué)習(xí)WebGL很方便。

首先，我創(chuàng)建了一個(gè)著色器程序以將顏色轉(zhuǎn)換為灰度：

<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（）函數(shù)將視頻元素綁定到WebGL紋理：

var drawInfo = {
            x: 0,
            y: 0,
            dx: 1,
            dy: 1,
            textureInfo: loadImageAndCreateTextureInfo(videoElement)
          };
         
        draw(drawInfo);

然后，我將圖像數(shù)據(jù)讀取到Uint8Array：

buffer = new Uint8Array(width * height * 4);
gl.readPixels(
            0,
            0,
            gl.drawingBufferWidth,
            gl.drawingBufferHeight,
            gl.RGBA,
            gl.UNSIGNED_BYTE,
            buffer
        );

有趣的是輸出圖像是顛倒的。要沿其垂直軸翻轉(zhuǎn)圖像數(shù)據(jù)，可以調(diào)用gl.pixelStorei（）：

function drawImage(tex, texWidth, texHeight, dstX, dstY) {
  gl.bindTexture(gl.TEXTURE_2D, tex);
  gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);

最后，從緩沖區(qū)中提取灰度數(shù)據(jù)：

gray = new Uint8Array(width * height);
let gray_index = 0;
for (i = 0; i < width * height * 4; i += 4) { gray[gray_index++] = buffer[i]; }

這是在我的網(wǎng)絡(luò)瀏覽器中運(yùn)行該應(yīng)用程序的屏幕截圖。

Dynamic Web TWAIN教程：如何使用WebGL加快Web條形碼的解碼速度

條形碼解碼性能比較：灰度圖像與彩色圖像

要衡量性能差異，我們可以使用以下公式：

total time = image data obtaining time + barcode decoding time

我對(duì)640×480視頻流進(jìn)行了簡(jiǎn)單測(cè)試。

Dynamic Web TWAIN教程：如何使用WebGL加快Web條形碼的解碼速度

如您所見，在我的PC上從WebGL（灰度圖像）獲取圖像數(shù)據(jù)的時(shí)間成本比從畫布（彩色圖像）獲取圖像數(shù)據(jù)的時(shí)間成本大約慢5倍，因?yàn)镚PU數(shù)據(jù)傳輸需要時(shí)間。但是，使用WebGL進(jìn)行條形碼解碼的總CPU時(shí)間成本較低。

想要購買Dynamic Web TWAIN正版授權(quán)，或了解更多產(chǎn)品信息請(qǐng)點(diǎn)擊