0

私はjavascriptについてかなり新しいです。長い検索の後、私は理由を見つけることができませんでしたが、人気のあるブラウザは、この定義 new Worker("BarcodeWorker.js") を基本の js サポートとして Android WebView. 元のコードは、github の Eddie Larsson バーコード リーダーからのものです。ありがとう。

<!DOCTYPE html>
<meta charset=utf-8>
<html lang="en">
<head>
    <title>BarcodeReader</title>
</head>
<body>  
    <div id="container">
        <img width="640" height="480" src="about:blank" alt="" id="picture">
        <input id="Take-Picture" type="file" accept="image/*;capture=camera" />
        <p id="textbit"></p>
    </div>
    <script type="text/javascript">
        var takePicture = document.querySelector("#Take-Picture"),
        showPicture = document.querySelector("#picture");
        Result = document.querySelector("#textbit");
        Canvas = document.createElement("canvas");
        Canvas.width=640;
        Canvas.height=480;
        var resultArray = [];
        ctx = Canvas.getContext("2d");
        var workerCount = 0;
        function receiveMessage(e) {
            if(e.data.success === "log") {
                console.log(e.data.result);
                return;
            }
            workerCount--;
            if(e.data.success){
                var tempArray = e.data.result;
                for(var i = 0; i < tempArray.length; i++) {
                    if(resultArray.indexOf(tempArray[i]) == -1) {
                        resultArray.push(tempArray[i]);
                    }
                }
                Result.innerHTML=resultArray.join("<br />");
            }else{
                if(resultArray.length === 0 && workerCount === 0) {
                    Result.innerHTML="Decoding failed.";
                }
            }
        }
                    //Where the issue starts
        var script='';
        var DecodeWorker = new Worker("DecoderWorker.js");
        var RightWorker = new Worker("DecoderWorker.js");
        var LeftWorker = new Worker("DecoderWorker.js");
        var FlipWorker = new Worker("DecoderWorker.js");
        DecodeWorker.onmessage = receiveMessage;
        RightWorker.onmessage = receiveMessage;
        LeftWorker.onmessage = receiveMessage;
        FlipWorker.onmessage = receiveMessage;
        if(takePicture && showPicture) {
            takePicture.onchange = function (event) {
                var files = event.target.files
                if (files && files.length > 0) {
                    file = files[0];
                    try {
                        var URL = window.URL || window.webkitURL;
                        var imgURL = URL.createObjectURL(file);
                        showPicture.src = imgURL;
                        URL.revokeObjectURL(imgURL);
                        DecodeBar()
                    }
                    catch (e) {
                        try {
                            var fileReader = new FileReader();
                            fileReader.onload = function (event) {
                                showPicture.src = event.target.result;
                            };
                            fileReader.readAsDataURL(file);
                            DecodeBar()
                        }
                        catch (e) {
                            Result.innerHTML = "Neither createObjectURL or FileReader are supported";
                        }
                    }
                }
            };
        }
        function DecodeBar(){
            showPicture.onload = function(){
                ctx.drawImage(showPicture,0,0,Canvas.width,Canvas.height);
                resultArray = [];
                workerCount = 4;
                Result.innerHTML="";
                DecodeWorker.postMessage({pixels:        ctx.getImageData(0,0,Canvas.width,Canvas.height).data, cmd: "normal"});
                RightWorker.postMessage({pixels: ctx.getImageData(0,0,Canvas.width,Canvas.height).data, cmd: "right"});
                LeftWorker.postMessage({pixels: ctx.getImageData(0,0,Canvas.width,Canvas.height).data, cmd: "left"});
                FlipWorker.postMessage({pixels: ctx.getImageData(0,0,Canvas.width,Canvas.height).data, cmd: "flip"});
            }
        }
    </script>
</body>
</html>
4

1 に答える 1

0

Web ワーカーはご利用いただけないようです (現在のバージョンの Opera Mini と Android ブラウザーでは利用できません[ただし、モバイル Chrome では利用できます!])。これらは、リソースを大量に消費するタスクを別のスレッドに配置する方法であるため、メイン スレッドが滞ることはありません (アプリやページが一瞬フリーズしたように見えるのを防ぐのに役立ちます)。

幸いなことに、コードが機能するために必要ではありません。javascript を "DecoderWorker.js" からページのスコープに移動し、worker から直接コピーされた関数を呼び出す代わりに、message および onmessage イベントを修正/削除する必要があります。

更新:これは、開始するための実用的なフィドルです。メッセージイベントを関数に置き換えe.dataて変更しました：options

/* From reader.html */

function receiveMessage(options) {
    if(options.success === "log") {
        console.log(options.result);
        return;
    }
    workerCount--;
    if(options.success){
        var tempArray = options.result;
        for(var i = 0; i < tempArray.length; i++) {
            if(resultArray.indexOf(tempArray[i]) == -1) {
                resultArray.push(tempArray[i]);
            }
        }
        Result.innerHTML=resultArray.join("<br />");
    }else{
        if(resultArray.length === 0 && workerCount === 0) {
            Result.innerHTML="Decoding failed.";
        }
    }
}
function DecodeBar(){
    showPicture.onload = function(){
        ctx.drawImage(showPicture,0,0,Canvas.width,Canvas.height);
        resultArray = [];
        workerCount = 4;
        Result.innerHTML="";
        ReadBarcode({pixels: ctx.getImageData(0,0,Canvas.width,Canvas.height).data, cmd: "normal"}, receiveMessage);
        ReadBarcode({pixels: ctx.getImageData(0,0,Canvas.width,Canvas.height).data, cmd: "right"}, receiveMessage);
        ReadBarcode({pixels: ctx.getImageData(0,0,Canvas.width,Canvas.height).data, cmd: "left"}, receiveMessage);
        ReadBarcode({pixels: ctx.getImageData(0,0,Canvas.width,Canvas.height).data, cmd: "flip"}, receiveMessage);
    }
}

/* From the last onmessage handler in DecoderWorker.js */
function  ReadBarcode(options, callback) {
        Image = {
                data: new Uint8ClampedArray(options.pixels),
                width: 640,
                height: 480
        }
        var availableFormats = ["Code128","Code93","Code39","EAN-13"];
        FormatPriority = [];
        var skipList = [];
        if(typeof options.priority != 'undefined') {
                FormatPriority = options.priority;
        }
        for(var i = 0; i < availableFormats.length; i++) {
                if(FormatPriority.indexOf(availableFormats[i]) == -1) {
                        FormatPriority.push(availableFormats[i]);
                }
        }
        if(typeof options.skip != 'undefined') {
                skipList = options.skip;
        }
        for(var i = 0; i < skipList.length; i++) {
                if(FormatPriority.indexOf(skipList[i]) != -1) {
                        FormatPriority.splice(FormatPriority.indexOf(skipList[i]),1);
                }
        }
        CreateTable();
        switch(options.cmd) {
                case "flip":
                        flipTable();
                        break;
                case "right":
                        rotateTableRight();
                        break;
                case "left":
                        rotateTableLeft();
                        break;
                case "normal":
                        break;        
        }
        var FinalResult = Main();
        if(FinalResult.length > 0) {
                callback({result: FinalResult, success: true});
        } else {
                callback({result: FinalResult, success: false});
        }
}
于 2013-10-22T22:50:04.670 に答える