处理imageData的Web worker使用Firefox而不是Chrome

时间:2012-01-08 10:16:43

标签: javascript html5 html5-canvas web-worker

当我运行代码处理将imageData传递给网络工作者然后返回时,Firefox运行良好,但Chrome提供“未捕获的错误:DATA_CLONE_ERR:DOM例外25”

搜索谷歌表明旧版本的Chrome曾经有效吗?

我检查了一些,似乎我需要在发送它之前在imagedata上运行JSON.stringify和JSON.parse,但随后它会在任何地方停止工作。在FF 9中运行的代码是:

image.js:

var myImageData = context.getImageData(0, 0, canvas.width, canvas.height).data;
var worker = new Worker("http://direct.link/helpers/worker.js");
worker.postMessage(myImageData);  
worker.onmessage = function(event) {
  var value = event.data;
  switch (value.cmd){
    case 'last':
      //doing stuff 
      break;
  default:
      //doing stuff
    });
}

worker.js:

addEventListener('message', function(event) {
  var myImageData = event.data;
  // doing stuff.
  sendItBack(colors);
});
};

    function sendItBack(colors){
    each(colors, function(index, value){
      self.postMessage(value);
    }); 
    self.postMessage({'cmd': 'last'});
    }

我应该使用什么方法才能在app和web worker中来回发送这个imagedata?

谢谢!

编辑:

如果我复制到常规阵列,那么Chrome就会开始工作......

var newImageData = [];
for (var i=0,len=myImageData.length;i<len;++i) newImageData[i] = myImageData[i];

因此,chrome无法将CanvasPixelArray传递给worker,但它可以传递常规Array。但是firefox可以。

3 个答案:

答案 0 :(得分:5)

我所做的是将整个imagedata对象从上下文传递给worker,而不仅仅是数据:

var imgData = ctx.getImageData(0, 0, canvas.width, canvas.height);

// This works beautifully
worker.postMessage({imgData:imgData});

// But this throws the exception
worker.postMessage({imgData:imgData.data});

使用这种方法,你将一些额外的属性传递给worker(即数组的宽度和高度),但我认为这些额外的数据比复制整个数据数组的开销要好。

答案 1 :(得分:3)

将此作为后续发布。我可以重现您的错误,以防其他人可以回答您的问题(我不幸的是)。我已经搜索了Chromium问题,看它是否是一个突出的错误,但没有找到任何东西。鉴于图像处理是WebWorkers更受欢迎的用途之一,我希望有人能够快速回答你。

http://jsfiddle.net/gGFSJ/9/

来自Chrome(我添加的星号):

window.URL does not exist
window.WebKitURL does not exist
using window.webkitURL for URL
window.BlobBuilder does not exist
using window.WebKitBlobBuilder for BlobBuilder
***Uncaught Error: DATA_CLONE_ERR: DOM Exception 25***
data=send back.
data=to worker.
data=send back.
data=0.

来自Firefox:

using window.URL for URL
window.BlobBuilder does not exist
window.WebKitBlobBuilder does not exist
window.webkitBlobBuilder does not exist
using window.MozBlobBuilder for BlobBuilder
data=send back.
data=to worker.
data=send back.
data=0.
data=send back.
data=[object Uint8ClampedArray].

答案 2 :(得分:1)

如果我将 getimagedata.data 数组复制到常规数组,然后将该数组传递给webworker,那么Chrome就会开始工作。

var newImageData = [];
for (var i=0,len=myImageData.length;i<len;++i) newImageData[i] = myImageData[i];

因此,chrome无法将 CanvasPixelArray 传递给worker,但它可以传递常规Array。但Firefox可以直接传递 imagedata.data