Canvas 图像颤动 - 结合图像数据

Question

你好，我已经实现了一个函数，我在其中传递了一个 imageData 具有透明部分的 png 图像 (rgba) 数组。我用下面的代码拼合了图像，但我有一个关于 alpha 的问题，我需要一些帮助。正如您在下面的屏幕截图中看到的那样，红色文本有一个半透明的黑色阴影，但它呈现为白色而不是半透明。

var mergeImageData = function ( imageDataArray ) {

    var canvas = document.getElementById( 'canvas' );
    canvas.width = 512;
    canvas.height = 512;
    var ctx = canvas.getContext( '2d' );
    var newImageData = imageDataArray[ 0 ];


    for ( var j = 1, len = imageDataArray.length; j < len; j++ ) { // iterate through the imageDataArray

        console.log( imageDataArray[ j ].data.length );

        for ( var i = 0, bytes = imageDataArray[ j ].data.length; i < bytes; i += 4 ) { // iterate through image bytes

            var index = ( imageDataArray[ j ].data[ i + 3 ] === 0 ? 0 : j );

            newImageData.data[ i ] = imageDataArray[ index ].data[ i ];
            newImageData.data[ i + 1 ] = imageDataArray[ index ].data[ i + 1 ];
            newImageData.data[ i + 2 ] = imageDataArray[ index ].data[ i + 2 ];
            newImageData.data[ i + 3 ] = imageDataArray[ index ].data[ i + 3 ];
        }

    }

    ctx.putImageData( newImageData, 0, 0 );
    console.log( "all done" );

};

重要这将在未来的 webworker 中完成，这就是为什么我对这种方法感兴趣，因为网络工作者没有 canvas 访问权限。

Answer 1

您的第一个问题是 putImageData() 函数：根据 this answer by @ellisbben、

the putImageData method does not pay any attention to compositing; it merely copies pixel values. In order to get compositing, we need to use drawing operations.

因此您必须在内存中使用第二个 canvas（如 this answer by @markE 中所述）。

那么，你的第二个问题是你想在 webworker 中完成。
你是对的，网络工作者似乎无法处理这样的绘图操作：根据 this answer by @AshleysBrain

Web workers can only calculate, not modify the DOM or make any calls to draw to a canvas.

所以你唯一的方法是通过工作人员处理数据来拆分你的操作，然后将它绘制到你的主线程中。

这是一个示例，假设您在根文件夹中有 2 个分别名为 test0.png 和 test1.png 的 png 文件。

index.html

<html>
  <body>
  <canvas id="canvas"></canvas>
  </body>
   <script src="main.js"></script>
</html>

main.js

if (!!window.Worker) {
    var myWorker = new Worker("worker.js");

    myWorker.onmessage = function(e) {
        var tmp=document.createElement("canvas");
        tmp.width=512;
        tmp.height=512;
        var ctx2=tmp.getContext("2d");
        ctx2.putImageData(e.data[0],0,0);

        var canvas = document.getElementById( 'canvas' );
        canvas.width = 512;
        canvas.height = 512;
        var ctx = canvas.getContext( '2d' );
        ctx.fillStyle = "rgb(0,255, 0)";
        ctx.fillRect(0,0,250,50);
        ctx.drawImage(tmp,0,0);
    }
}

  var images = [];
  function getImagesData(){
    for(i=0; i<2; i++){
        var img = new Image();
        img.src = "test"+i+".png";
        //Should add an onload method
        var canvas = document.createElement("canvas");
        canvas.width = img.width;
        canvas.height = img.height;
        var ctx = canvas.getContext("2d");
        ctx.drawImage(img, 0, 0);

        images[i] = ctx.getImageData(0,0,img.width,img.height);
        }
    myWorker.postMessage(images);
    }

getImagesData();

Worker.js

var mergeImageData = function( imageDataArray ) {

    var newImageData = imageDataArray[ 0 ];

    for ( var j = 0; j < imageDataArray.length; j++ ) { // iterate through the imageDataArray


        for ( var i = 0, bytes = imageDataArray[ j ].data.length; i < bytes; i += 4 ) { // iterate through image bytes

            var index = ( imageDataArray[ j ].data[ i + 3 ] === 0 ? 0 : j );

            newImageData.data[ i ] = imageDataArray[ index ].data[ i ];
            newImageData.data[ i + 1 ] = imageDataArray[ index ].data[ i + 1 ];
            newImageData.data[ i + 2 ] = imageDataArray[ index ].data[ i + 2 ];
            newImageData.data[ i + 3 ] = imageDataArray[ index ].data[ i + 3 ];
        }
    }
    return newImageData;
};


onmessage = function(e) {
var res = mergeImageData(e.data);
postMessage([res]);
}

原始 png 文件

结果

Answer 2

http://robertleeplummerjr.github.io/CanvasWorker 要么 http://github.com/robertleeplummerjr/CanvasWorker

15000 张 png 在一秒钟内加载 ;)

Canvas 图像颤动 - 结合图像数据

Canvas image flattern - combine imageData

javascript

canvas

web-worker