ImageData到画布

Question

我正在尝试将图像数据放到画布c/ctx上，以下是我当前的代码：

console.log('Worker said: '+ e.data[1]);
var image = ctx.createImageData(20,300);
image.data = e.data[1];
ctx.putImageData(image,e.data[0],0);

是的，worker正在输出正确的信息(e.data1 =图像数据数组r，g，b，透明度，...，e.data =要导入的xpos )

我不明白为什么这不起作用？

以下是我的画布设置，以防万一

var c = document.getElementById("myCanvas")
var ctx = c.getContext('2d', { alpha: false });
c.width = 300;
c.height = 300;

Answer 1

不能将数组赋值给.data属性，必须复制值，这应该是可行的

var image = ctx.createImageData(20,300);
var length = e.data[1].length;

for (var i = 0; i < length; i++) {
    image.data[i] = e.data[1][i];
}
ctx.putImageData(image,e.data[0],0);

Answer 2

在现代浏览器中(IE除外)，您可以使用接受Uint8ClampedArray作为输入的ImageData constructor。

因此，假设您的Worker发送了一个Uint8Array，您所要做的就是首先在与发送的ArrayBuffer相同的ArrayBuffer上创建一个新的TypedArray视图，然后使用该视图初始化ImageData

​

const worker = new Worker( generateWorkerURL() );
worker.onmessage = (evt) => {
  // first a new view (same ArrayBuffer)
  const clampedView = new Uint8ClampedArray( evt.data.buffer );
  const imageData = new ImageData( clampedView, 500, 300 );
  const ctx = document.getElementById( 'canvas' ).getContext( '2d' );
  ctx.putImageData( imageData, 0, 0 );
};



// helper to integrate Worker in a Snippet
function generateWorkerURL() {
  const content = document.querySelector('[type="worker-script"]').textContent;
  const blob = new Blob( [ content ], { type: "text/javascript" }  );
  return URL.createObjectURL( blob );
}

<script type="worker-script">
  // fake worker code, generates noise
  const data = Uint8Array.from(
    { length: 500 * 300 * 4 },
    () => Math.random() * 0xFF
  );
  // We 'transfer' the TypedArray's buffer so that it's not copied
  // by passing it in an Array as the second argument of postMessage
  postMessage( data, [ data.buffer ] );
</script>
<canvas id="canvas" width="500" height="300"></canvas>

​

现在，您甚至可以直接从工作线程中的ImageData开始工作，并在完成后将其传输到主线程：

​

const worker = new Worker( generateWorkerURL() );
worker.onmessage = (evt) => {
  const ctx = document.getElementById( 'canvas' ).getContext( '2d' );
  // put directly the imageData sent by the Worker
  ctx.putImageData( evt.data, 0, 0 );
};



// helper to integrate Worker in a Snippet
function generateWorkerURL() {
  const content = document.querySelector('[type="worker-script"]').textContent;
  const blob = new Blob( [ content ], { type: "text/javascript" }  );
  return URL.createObjectURL( blob );
}

<script type="worker-script">
  // fake worker code, generates noise
  const imageData = new ImageData( 500, 300 );
  for( let i=0; i<imageData.data.length; i++ ) {
    imageData.data[ i ] = Math.random() * 0xFF;
  }
  // we transfer the ImageData's buffer
  postMessage( imageData, [ imageData.data.buffer ] );
</script>
<canvas id="canvas" width="500" height="300"></canvas>

​