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

Create new image from 2 images in webpage

本文关键字：图像 网页 创建 新图像 张图像      更新时间：2023-09-26

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

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

http://jsfiddle.net/7UwDe/

<img id="shirt" src="#">
<img id="corn" src="#">
<img id="final" alt="image to display after">

您可以使用 canvas 元素。

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>

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

PHP.net：图像复制

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

PHP.net：邮件

相关文章：