2 つの画像を重ね合わせて 1 つの画像を作成したいと考えています。PHPまたはJSを使用するかどうかは気にしません。別の画像タグに表示して、それを電子メールで送信する必要があります。
私がやりたいことのアイデアをあなたに与えるためのフィドルがあります。
<img id="shirt" src="#">
<img id="corn" src="#">
<img id="final" alt="image to display after">
2 つの画像を重ね合わせて 1 つの画像を作成したいと考えています。PHPまたはJSを使用するかどうかは気にしません。別の画像タグに表示して、それを電子メールで送信する必要があります。
私がやりたいことのアイデアをあなたに与えるためのフィドルがあります。
<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>