拖放2張圖片將它們放置在背景上並將它們保存爲1張組合圖片？

Question

我有一個PHP腳本使用服務器上的圖像處理GD/ImageMagick庫來生成圖像上的文本字符串。

下圖顯示了一個演示。

如果我生成了2行文字，將2行圖像堆疊在一起，並使用JavaScript來允許用戶碎片並放下以重新排列2幅圖像在背景圖像上的位置。

我怎麼能保存一個新的圖像與2個文本圖像在用戶位置在他們的位置？

---

UPDATE

下面是一個快速演示這就像我的演示圖像的圖像生成上述文本。

我會使用用戶數據將這些圖像加載到頁面中以生成他們想要的文本，然後使用JavaScript拖放它們。

當點擊一個提交按鈕時，我需要獲取所有用戶生成的文本圖像的座標，並將它們發佈到一個PHP腳本中，該腳本將生成一個新的大圖像，並將它們放置在用戶將其拖放到位。

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); 
?>