从网页中的2张图片创建新图片

I want to create an image from 2 images stacked on top of each other. I dont mind if it uses PHP or JS. I need it to display in another image tag and then send that off to email.

There is a fiddle to give you an idea of what I want to do.

http://jsfiddle.net/7UwDe/

<img id="shirt" src="#">
<img id="corn" src="#">

<img id="final" alt="image to display after">

You can use canvas element.

js code

onload = function() {
    x = 500;
    y = 500;

    var canvas = document.getElementById('canvas1');
    if (! canvas || ! canvas.getContext) { return false; }
    canvas.width = x;
    canvas.height = y;
    var ctx = canvas.getContext('2d');
    var img1 = new Image();
    var img2 = new Image();
    img1.src = "http://www.justfitness4u.com/wp-content/uploads/2012/11/White-t-shirt.jpg";
    img2.src = "http://fordevillediaries.com/wp-content/uploads/2013/03/ear-of-corn.jpg";
    img1.onload = function() {
        ctx.drawImage(img1, 0, 0, x, y);
    }
    img2.onload = function() {
        ctx.drawImage(img2, 150, 100, 150, 120);
    }
}

and adding this to your HTML code

<canvas id="canvas1"></canvas>

You can use the GD library with PHP to load your images and copy one over the other at specified points:

PHP.net: imagecopy

You could then save the image to your webserver and embed the image using html in an email:

PHP.net: mail