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

时间:2013-11-06 02:08:33

标签: javascript php jquery html css

我想从两个堆叠在一起的图像创建一个图像。我不介意它是否使用PHP或JS。我需要它显示在另一个图像标签中,然后将其发送到电子邮件。

有一个小提琴让你知道我想做什么。

http://jsfiddle.net/7UwDe/

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

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

2 个答案:

答案 0 :(得分:1)

您可以将GD库与PHP一起使用来加载图像,并在指定的点上复制一个图像:

PHP.net:imagecopy

然后,您可以将图像保存到网络服务器,并使用html在电子邮件中嵌入图像:

PHP.net:mail

答案 1 :(得分:1)

您可以使用canvas元素。

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);
    }
}

并将其添加到您的HTML代码

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