Question

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

enter image description here

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中完成，这就是我对此方法感兴趣的原因，因为Web工作者没有画布访问权。

Answer 1

您的第一个问题是使用putImageData()功能：根据this answer @ellisbben，

putImageData方法没有注意合成;它只是复制像素值。为了进行合成，我们需要使用绘图操作。

所以你必须在内存中使用第二个画布（在this answer @markE中描述）。

然后，你的第二个问题是你想在网络工作者中这样做你是对的，网络工作者似乎无法处理这样的绘图操作：根据this answer @AshleysBrain {/ 3>}

Web worker只能计算，不能修改DOM或进行任何调用以绘制到画布。

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

这是一个例子，假设您有2个png文件，分别称为test0.png＆amp;你的根文件夹中的test1.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文件
enter image description here

<强>结果
Result

Answer 2

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

15000 pngs在一秒钟内加载;）

画布图像flattern - 结合imageData

2 个答案: