我对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});
}
}