javascript - 从网页中的 2 个图像创建新图像

Question

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

有一个小提琴可以让您了解我想要做什么。

http://jsfiddle.net/7UwDe/

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

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

Answer 1

您可以使用带有 PHP 的 GD 库来加载您的图像并在指定点将一张复制到另一张：

PHP.net：图像复制

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

PHP.net：邮件

Answer 2

您可以使用画布元素。

js代码

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>