画布图像模板-结合imageData
你好，我实现了一个函数，在这个函数中，我传递了一个带有透明部件的png映像( imageData of png images，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中完成，这就是为什么我对这种方法感兴趣的原因，因为web工作者没有画布访问权限。
回答 2
Stack Overflow用户
发布于 2015-01-23 16:26:31
您的第一个问题是关于putImageData()函数:根据this answer by @ellisbben，
putImageData方法不注意合成；它只是复制像素值。为了得到合成，我们需要使用绘图操作。
因此，您必须使用第二个画布，即内存中的画布(如this answer和@markE所描述的那样)。
然后，您的第二个问题是，您想要在一个网络工作者。
你说得对，网络工作者似乎无法处理这样的绘图操作:根据this answer by @AshleysBrain
Web工作人员只能计算，不能修改DOM或调用任何绘制画布。
因此，您的唯一方法是通过由工作人员处理数据来拆分操作，然后将其绘制到主线程中。
下面是一个示例，假设根文件夹中分别有两个名为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文件
结果
Stack Overflow用户
发布于 2015-05-01 12:56:14
http://robertleeplummerjr.github.io/CanvasWorker或http://github.com/robertleeplummerjr/CanvasWorker
( 15000 pngs负载在每秒以下;)
https://stackoverflow.com/questions/28108581
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号