Merging 2 png and save it aka ingame creator

[myew]

Hi, hope that I can find some help here.


I trying to merge 2 .png into 1 and then save it. Basically it for my character face or so call ingame creator.


I try to use below script althou there no error, but it not working.


var c = document.createElement('canvas');
var ctx = c.getContext('2d');
var image1 = new Image();
var image2 = new Image();
image1.src = "1.png"
image1.onload = function() {
ctx.drawImage(image1, 0, 0, 142, 142);
image2.src = "2.png";
image2.onload = function() {
ctx.drawImage(image2, 0, 0, 142, 142);
var img = c.toDataURL("image/png");
document.write('<img src="' + img + '" width="142" height="142"/>');}};


Will be grateful if can get this working or that another way to merge n save png


Cheers


Mike

 

[InBlast]

Eeeeeh... Probably I don't understand what you're trying to do, but why aren't you using an image editor (Photoshop,etc...) for this ?

 

[Andar]

I've moved this thread to Learning Javascript. Please be sure to post your threads in the correct forum next time. Thank you.

 

[myew]

Eeeeeh... Probably I don't understand what you're trying to do, but why aren't you using an image editor (Photoshop,etc...) for this ?

Hi InBlast,


I trying to make a ingame generator where gamer can create their own face. I have 6 type hairstyle, mouth, beard, eye etc. It will take alot of photoshop to create all the pre made faces.


Therefore if i can get the merging working, it will save a lot of time n I can have more choice of facial feature in the game.

 

[izyCoder]

I bet you want to make an in game character generator right? instead of merging the PNGs, you can rewrite the sprite class to make it so it will load 2 image. As example you have image_head.png and image_hair.png, in the sprite class you can make it load both PNGs instead of single png and draw it in canvas.


This might help:

 

[myew]

I bet you want to make an in game character generator right? instead of merging the PNGs, you can rewrite the sprite class to make it so it will load 2 image. As example you have image_head.png and image_hair.png, in the sprite class you can make it load both PNGs instead of single png and draw it in canvas.


This might help:

Thanks izyCoder for the suggestion.


I try out VE plugin for past 2 days. I cant get it to work. prolly clash with some of my plugin.


I realise that I will need to equip them as weapon or armour. What I want to do is hair, beard and eye feature. So the equip menu will show my character wearing beard or eye.. kind of weird even thou i can rename them.

 

[myew]

This merge image code that im trying to do: can i do it on event or i need a plugin?


Below link is a simple example of what I trying to do. (pls bear with the button graphic as i do it in a rush)


a ) The hair or others button is quote with 2 event: 1) show image 2) set variable


b ) the ok button is to 1) activate the merge img that i trying to solve and 2) change actor img after i got the merging img


http://pacumedia.com/gen/


hope that some1 can help me with this.


Cheers


Mike