拖放 2 张图像以将它们放置在背景上并将它们保存为 1 张组合图像？

Question

我有一个 PHP 脚本，它使用服务器上的图像处理 GD/ImageMagick 库在图像上生成文本字符串。

下图是一个演示。

如果我将 2 行文本生成为 2 个相互堆叠的图像，并使用 JavaScript 允许用户通过分片和拖放来重新排列 2 个图像在背景图像上的位置。

如何在用户放置它们的位置保存带有 2 个文本图像的新图像？

---

更新

下面是一个快速演示，它会在图像上生成一个文本，就像我上面的演示图像一样。

我会使用用户数据将这些图像加载到页面中以生成他们想要的文本，然后我将使用 JavaScript 将它们拖放到页面中。

单击提交按钮时，我需要获取所有用户生成的文本图像的坐标并将它们发布到 PHP 脚本，该脚本将生成 1 个新的大图像，其中包含所有文本图像并将它们定位在用户的位置将它们拖放到适当的位置。

1. 我需要帮助以获取所需的正确坐标。
2. 在 PHP 端使用这些坐标构建一个新图像。

Demo JSFiddle 像上面那样加载一个图像文本文件。 https://jsfiddle.net/jasondavis/nreme6yf/

<?php
/* Create some objects */
$image = new Imagick();
$draw = new ImagickDraw();
$pixel = new ImagickPixel( 'black' );

/* New image */
$image->newImage(1000, 175, $pixel);

/*  text color */
//$draw->setFillColor('white');

/* Font properties */
if(isset($_GET['font'])){
    $fontName = $_GET['font'];
}else{
    $fontName = 'MISTRESS.ttf';
}

if(isset($_GET['font-size'])){
    $fontSize = $_GET['font-size'];
}else{
    $fontSize = 30;
}

if(isset($_GET['fill-color'])){
    $fillColor = $_GET['fill-color'];
}else{
    $fillColor = 'ffffff';
}

if(isset($_GET['stroke-color'])){
    $strokeColor = $_GET['stroke-color'];
}else{
    $strokeColor = '000000';
}

if(isset($_GET['stroke-width'])){
    $strokeWidth = $_GET['stroke-width'];
}else{
    $strokeWidth = 1;
}

if(isset($_GET['x'])){
    $x = $_GET['x'];
}else{
    $x = 10;
}
if(isset($_GET['y'])){
    $y = $_GET['y'];
}else{
    $y = 115;
}
if(isset($_GET['angle'])){
    $angle = $_GET['angle'];
}else{
    $angle = 0;
}

if(isset($_GET['text'])){
    $text = $_GET['text'];
}else{
    $text = 'The quick brown fox jumps over the lazy dog';
}




$draw->setFont('fonts-ttf/'.$fontName);
$draw->setFontSize($fontSize);
$draw->setFillColor('#'.$fillColor);
$draw->setStrokeColor(new ImagickPixel('#'.$strokeColor));
$draw->setStrokeWidth($strokeWidth);
$draw->setStrokeAntialias(true);
$draw->setTextAntialias(true);

/* Create text */
$image->annotateImage($draw, $x, $y, $angle, $text);

/* Give image a format */
$image->setImageFormat('png');

/* Output the image with headers */
header('Content-type: image/png');
echo $image;

?>

Answer 1

您可以通过以下方法拍摄两张图片，然后将它们放置在空白（透明）画布上的任何所需位置，该画布的大小刚好可以容纳它们。我刚刚硬编码了顶部的图像大小和位置，并人工生成了红色和蓝色图像，但您可以从用户的浏览器中获取它们。因此，您的代码实际上会在我标记它的所有设置代码之后开始。

#!/usr/local/bin/php -f

<?php
// Set image widths and heights, and x,y coordinates of top-left corner
$im1_w=280;
$im1_h=150;
$im1_x=50;
$im1_y=100;
$im2_w=100;
$im2_h=220;
$im2_x=40;
$im2_y=70;

// Create images
$im1 = imagecreatetruecolor($im1_w,$im1_h);
$im1_colour = imagecolorallocate($im1, 255, 0, 0); // red
imagefilledrectangle($im1, 0, 0, $im1_w-1, $im1_h-1, $im1_colour);

$im2 = imagecreatetruecolor($im2_w,$im2_h);
$im2_colour = imagecolorallocate($im2, 0, 0, 255); // blue
imagefilledrectangle($im2, 0, 0, $im2_w-1, $im2_h-1, $im2_colour);

// Work out dimensions of output image   <=== YOUR CODE WOULD START FROM HERE
$out_w=max($im1_x+$im1_w,$im2_x+$im2_w);
$out_h=max($im1_y+$im1_h,$im2_y+$im2_h);

// Debug
printf("Output dimensions: %dx%d\n",$out_w,$out_h);

// Create blank (transparent) output image
$out=imagecreatetruecolor($out_w,$out_h);
imagesavealpha($out,true);
$trans_colour = imagecolorallocatealpha($out, 0, 0, 0, 127);
imagefill($out, 0, 0, $trans_colour);

// Copy two source images into place on blank canvas
imagecopy($out, $im1, $im1_x, $im1_y, 0, 0, $im1_w, $im1_h);
imagecopy($out, $im2, $im2_x, $im2_y, 0, 0, $im2_w, $im2_h);

// Output and free from memory
imagepng($out,"result.png");

imagedestroy($im1);
imagedestroy($im2);
imagedestroy($out);
?>