Android Web Console: UncaughtReferenceError: 未定义工作线程

Android Web Console: UncaughtReferenceError: Worker is not defined

本文关键字：工作线程未定义 UncaughtReferenceError Console Android Web 更新时间：2023-09-26

我对javascript很陌生。经过长时间的搜索，我找不到原因，但看起来流行的浏览器对这个定义做了一些工作新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>

看起来 Web Workers 对您不可用（并且在当前版本的 Opera Mini 和 Android 浏览器中不可用 [但在移动 Chrome 中！]）。它们是将一些资源密集型任务放在另一个线程中的一种方法，因此您的主线程不会被阻塞（有助于防止应用程序/页面暂时冻结）。

幸运的是，它们不是代码工作所必需的。您需要将 javascript 从"DecoderWorker.js"移动到页面范围内，并返工/删除消息和 onmessage 事件，而不是直接调用从 worker 复制的函数。

更新：这是一个工作小提琴，可以帮助您入门。我只是用options替换了e.data并将消息事件更改为函数：

/* 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});
        }
}