我正在尝试利用网络工作者,以便将png数组合并为具有透明度的单个图像,就像合并多个图层时的photoshop一样。
我这样做的原因是因为我将所有组合的结果保存到indexeddb中以供脱机使用,然后在我的three.js应用程序中使用该图像创建纹理。
场景是大约有400种产品,并且纹理-3d平面(产品)上的图像是3个图像(产品标题,价格和产品图像)的混合。
到目前为止,我已经实现了这一点,但是图像处理并不是那么好,我想知道如果我将它们传递给Web Worker,我该如何处理呢? imageData.data
这是我到目前为止所拥有的,但是我无法使其正常工作。(此操作现在无需网络工作人员即可尝试使合并正常工作)
var images = [];
var imageData = [];
images.push( function ( callback ) {
var mobile = new Image();
mobile.onload = function () {
console.log( "mobile loaded" );
callback( null, mobile );
};
mobile.onerror = function ( e ) {
console.log( "mobile error" );
callback( e, null );
};
mobile.src = "mobile.png";
} );
images.push( function ( callback ) {
var text = new Image();
text.onload = function () {
console.log( "text loaded" );
callback( null, text );
};
text.onerror = function ( e ) {
console.log( "text error" );
callback( e, null );
};
text.src = "text.png";
} );
async.series( images, function ( err, results ) {
if ( err ) {
console.error( err );
} else {
console.log( results );
getImageData( results );
}
} );
var getImageData = function ( images ) {
for ( var i = 0; i < images.length; i++ ) {
var canvas = document.createElement( 'canvas' );
canvas.width = 512;
canvas.height = 512;
var ctx = canvas.getContext( '2d' );
ctx.drawImage( images[ i ], 0, 0 );
imageData.push( ctx.getImageData( 0, 0, canvas.width, canvas.height ).data );
}
merge( imageData );
};
var merge = function ( data ) {
var merged = [];
var mixFactor = 0.5;
//var newPixel = imageMainPixel * mixFactor + imageSecPixel * ( 1 - mixFactor )
//for ( var i = 0, len = data.length; i < len; i++ ) {
for ( var j = 0, byteLen = data[ 0 ].length; j < byteLen; j += 4 ) {
var r = data[ 0 ][ j ] * mixFactor + data[ 1 ][ j ] * ( 1 - mixFactor );
var g = data[ 0 ][ j + 1 ] * mixFactor + data[ 1 ][ j + 1 ] * ( 1 - mixFactor );
var b = data[ 0 ][ j + 2 ] * mixFactor + data[ 1 ][ j + 2 ] * ( 1 - mixFactor );
var a = data[ 0 ][ j + 3 ] * mixFactor + data[ 1 ][ j + 3 ] * ( 1 - mixFactor );
merged[ j ] = r;
merged[ j + 1 ] = g;
merged[ j + 2 ] = b;
merged[ j + 4 ] = a;
}
//}
var canvas = document.getElementById( 'canvas' );
canvas.width = 512;
canvas.height = 512;
var ctx = canvas.getContext( '2d' );
var imageData = ctx.createImageData( 512, 512 );
imageData.data.set( merged );
ctx.putImageData( imageData, 0, 0 );
};
我目前收到的错误是这样的:
Uncaught RangeError: Source is too large
更新
我通过将合并功能更改为此来合并图像:
var merge = function ( data ) {
var canvas = document.getElementById( 'canvas' );
canvas.width = 512;
canvas.height = 512;
var ctx = canvas.getContext( '2d' );
var imageData = ctx.createImageData( 512, 512 );
var mixFactor = 0.5;
for ( var j = 0, byteLen = data[ 0 ].length; j < byteLen; j += 4 ) {
imageData.data[ j ] = data[ 0 ][ j ] * mixFactor + data[ 1 ][ j ] * ( 1 - mixFactor );
imageData.data[ j + 1 ] = data[ 0 ][ j + 1 ] * mixFactor + data[ 1 ][ j + 1 ] * ( 1 - mixFactor );
imageData.data[ j + 2 ] = data[ 0 ][ j + 2 ] * mixFactor + data[ 1 ][ j + 2 ] * ( 1 - mixFactor );
imageData.data[ j + 3 ] = data[ 0 ][ j + 3 ] * mixFactor + data[ 1 ][ j + 3 ] * ( 1 - mixFactor );
}
console.log( imageData.data.length );
ctx.putImageData( imageData, 0, 0 );
};
结果就像两幅图像都具有50%的不透明度。但是,这不是理想的结果。我只希望图像充当层,就像一个在另一个顶部之上有多个png ...如果一个在顶部具有透明的位置,则您应该能够看到其下的图像。
也许我应该根据alpha值进行绘制?
经过一番思考,我终于检查了每个像素的alpha值,并设法完成了我想要的。我重新编写了合并功能,如下所示:
var merge = function ( data ) {
var canvas = document.getElementById( 'canvas' );
canvas.width = 512;
canvas.height = 512;
var ctx = canvas.getContext( '2d' );
var imageData = ctx.createImageData( 512, 512 );
var mixFactor = 0.5;
for ( var j = 0, byteLen = data[ 0 ].length; j < byteLen; j += 4 ) {
// imageData.data[ j ] = data[ 0 ][ j ] * mixFactor + data[ 1 ][ j ] * ( 1 - mixFactor );
// imageData.data[ j + 1 ] = data[ 0 ][ j + 1 ] * mixFactor + data[ 1 ][ j + 1 ] * ( 1 - mixFactor );
// imageData.data[ j + 2 ] = data[ 0 ][ j + 2 ] * mixFactor + data[ 1 ][ j + 2 ] * ( 1 - mixFactor );
// imageData.data[ j + 3 ] = data[ 0 ][ j + 3 ] * mixFactor + data[ 1 ][ j + 3 ] * ( 1 - mixFactor );
imageData.data[ j ] = ( data[ 1 ][ j + 3 ] === 0 ? data[ 0 ][ j ] : data[ 1 ][ j ] );
imageData.data[ j + 1 ] = ( data[ 1 ][ j + 3 ] === 0 ? data[ 0 ][ j + 1 ] : data[ 1 ][ j + 1 ] );
imageData.data[ j + 2 ] = ( data[ 1 ][ j + 3 ] === 0 ? data[ 0 ][ j + 2 ] : data[ 1 ][ j + 2 ] );
imageData.data[ j + 3 ] = ( data[ 1 ][ j + 3 ] === 0 ? data[ 0 ][ j + 3 ] : data[ 1 ][ j + 3 ] );
}
console.log( imageData.data.length );
ctx.putImageData( imageData, 0, 0 );
};
仍然需要一些改进,但是我想现在我可以在Web worker中合并图像了:)
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句