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

Posted 2023-02-25

【中文标题】拖放 2 张图像以将它们放置在背景上并将它们保存为 1 张组合图像？

【英文标题】：Drag and drop 2 images to position them on a background and save them as 1 combined image?

【发布时间】：2016-01-07 21:43:21

【问题描述】：

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

下图是一个演示。

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

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

---

更新

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

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

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

我需要帮助以获取所需的正确坐标。 在 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;

?>

【问题讨论】：

新的 html canvas 元素不能做这样的事情吗？

您是在问如何进行拖放？或者如何将坐标传回服务器？或者如何加入图像？您希望使用 Javascript 或 PHP 得到答案吗？我们应该使用 GD 还是 ImageMagick？

@MarkSetchell 我可以在屏幕上获得 2 个文本字符串图像，如上图所示，我可以使它们可拖动。我想要做的是创建一个新图像，将 2 个文本图像定位到用户将它们拖动到的位置。所以在拖动后我会假设需要获取屏幕上所有文本图像的坐标并发布到服务器，然后在服务器上创建一个使用坐标定位图像的新图像....继续...

@MarkSetchell ...继续...我不确定我需要什么确切的坐标或获取它们。在服务器端，如果我有坐标，我不确定如何创建一个将所有这些组合成 1 的新图像。我正在更新我的问题以显示生成文本图像的 PHP 代码。

@Dagon 我以前从未使用过 Canvas，所以我也会将其视为可能的解决方案，谢谢

【参考方案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);
?>

【讨论】：

感谢 ks 的演示。当我运行它时，我得到的只是打印到屏幕上的尺寸。我怎样才能从这段代码中得到你的输出？

在名为result.png的文件中。