如何将多张图像和文字合并为一张图像？

Question

我有多个PNG图像在一个div中，这些图像是PNG格式的，并且根据用户选择的自定义选项呈现为单个图像。另外，添加文本也是一种功能，它允许在这些图像上方添加带有文本的div。

现在，我想生成一个包含这些多个图像和文本组合的图像，保持文本的字体和大小不变。

例如，出现在界面上的图像是由多个图像和文本组合而成的。(它通过css定位来管理) 而这个图像是由下面两个图像和文本组成的。

我尝试获取图片的方法是：创建一个名为create-image.php的文件。

<?php
createimageinstantly();
function createimageinstantly($img1='',$img2='',$img3=''){
    $x=$y=1000;
    header('Content-Type: image/png');
    $targetFolder = '/gw/media/uploads/processed/';
    $targetPath = $_SERVER['DOCUMENT_ROOT'] . $targetFolder;

    $img1 = $targetPath.'img1.png';
    $img2 = $targetPath.'img2.png';
    $img3 = $targetPath.'img3.png';

    $outputImage = imagecreatetruecolor(1000, 1000);

    $first = imagecreatefrompng($img1);
    $second = imagecreatefrompng($img2);
    $third = imagecreatefrompng($img3);

    imagecopy($outputImage,$first,0,0,0,0, $x, $y);
    imagecopy($outputImage,$second,0,0,0,0, $x, $y);
    imagecopy($outputImage,$third,0,200,-200,0, $x, $y);

    imagepng($outputImage, $targetPath .round(microtime(true) * 1000).'.png');

    imagedestroy($outputImage);
 }
?>

但是这给我一个全黑的图像 另外，我需要将最终生成的图像与文本混合。

编辑：

- jpg 图像改为 png - imagecopymerge 改为 imagecopy

最新结果：

       <?php
            createimageinstantly();
            //$targetFolder = '/gw/media/uploads/processed/';
            //$targetPath = $_SERVER['DOCUMENT_ROOT'] . $targetFolder;
            //$img3 = $targetPath.'img3.png';
            //print_r(getimagesize('http://www.vapor-rage.com/wp-content/uploads/2014/05/sample.jpg'));
            function createimageinstantly($img1='',$img2='',$img3=''){
                $x=$y=600;
                header('Content-Type: image/png');
                $targetFolder = '/gw/media/uploads/processed/';
                $targetPath = $_SERVER['DOCUMENT_ROOT'] . $targetFolder;

                $img1 = $targetPath.'img1.png';
                $img2 = $targetPath.'img2.png';
                $img3 = $targetPath.'img3.png';

                $outputImage = imagecreatetruecolor(600, 600);

                // set background to white
                $white = imagecolorallocate($outputImage, 255, 255, 255);
                imagefill($outputImage, 0, 0, $white);

                $first = imagecreatefrompng($img1);
                $second = imagecreatefrompng($img2);
                $third = imagecreatefrompng($img3);

                //imagecopyresized ( resource $dst_image , resource $src_image , int $dst_x , int $dst_y , int $src_x , int $src_y , int $dst_w , int $dst_h , int $src_w , int $src_h )
                imagecopyresized($outputImage,$first,0,0,0,0, $x, $y,$x,$y);
                imagecopyresized($outputImage,$second,0,0,0,0, $x, $y,$x,$y);
                imagecopyresized($outputImage,$third,200,200,0,0, 100, 100, 204, 148);

                imagepng($outputImage, $targetPath .round(microtime(true)).'.png');

                imagedestroy($outputImage);
            }
        ?>

而且输出图像

- Suman KC

---

我建议使用带有alpha通道的png图像，而不是jpeg图像。否则，要达到预期的结果会很棘手。 - Alex Blex

请参考以下链接： https://dev59.com/blLTa4cB1Zd3GeqPb5c2 希望对您有所帮助。 - Keyur Mistry

尝试使用imagecopy()代替imagecopymerge()。 - Mark Setchell

@MarkSetchell imagecopy()的结果已经改变，但仍未占据整个宽度。 - Suman KC

你需要在复制图像之前对其进行缩放，或者创建一个大小不是1000x1000像素的图像，而是最大图像的大小。 - chillichief

@chillichief，但是一个封面图片的大小是1000x1000，而且我已经创建了一个尺寸为1000x1000的背景，但是它们并不完全重叠。 - Suman KC

Answer 1

我是这样实现的：

使用了这3张图片，img1.png,img2.png,img3.png

并且使用了create-image.php文件。

 <?php
        createimageinstantly();
        //$targetFolder = '/gw/media/uploads/processed/';
        //$targetPath = $_SERVER['DOCUMENT_ROOT'] . $targetFolder;
        //$img3 = $targetPath.'img3.png';
        //print_r(getimagesize('http://www.vapor-rage.com/wp-content/uploads/2014/05/sample.jpg'));
        function createimageinstantly($img1='',$img2='',$img3=''){
            $x=$y=600;
            header('Content-Type: image/png');
            $targetFolder = '/gw/media/uploads/processed/';
            $targetPath = $_SERVER['DOCUMENT_ROOT'] . $targetFolder;

            $img1 = $targetPath.'img1.png';
            $img2 = $targetPath.'img2.png';
            $img3 = $targetPath.'img3.png';

            $outputImage = imagecreatetruecolor(600, 600);

            // set background to white
            $white = imagecolorallocate($outputImage, 255, 255, 255);
            imagefill($outputImage, 0, 0, $white);

            $first = imagecreatefrompng($img1);
            $second = imagecreatefrompng($img2);
            $third = imagecreatefrompng($img3);

            //imagecopyresized ( resource $dst_image , resource $src_image , int $dst_x , int $dst_y , int $src_x , int $src_y , int $dst_w , int $dst_h , int $src_w , int $src_h )
            imagecopyresized($outputImage,$first,0,0,0,0, $x, $y,$x,$y);
            imagecopyresized($outputImage,$second,0,0,0,0, $x, $y,$x,$y);
            imagecopyresized($outputImage,$third,200,200,0,0, 100, 100, 204, 148);

            // Add the text
            //imagettftext ( resource $image , float $size , float $angle , int $x , int $y , int $color , string $fontfile , string $text )
            //$white = imagecolorallocate($im, 255, 255, 255);
            $text = 'School Name Here';
            $font = 'OldeEnglish.ttf';
            imagettftext($outputImage, 32, 0, 150, 150, $white, $font, $text);

            $filename =$targetPath .round(microtime(true)).'.png';
            imagepng($outputImage, $filename);

            imagedestroy($outputImage);
        }
    ?>

结果图片为

参考资料：imagecopyresized和imagettftext

感谢通过评论/回答提供的建议。我还在详细介绍此内容：http://sumankc.com/2016/01/30/merge-multiple-images-and-text-to-create-single-image-php-gd-library/ 祝您有个美好的一天！

- Suman KC

Answer 2

首先，JPEG图像没有阿尔法通道 - 这意味着图像中的每个像素都有一些颜色，没有关于它透明度的信息。这可能很难创建一个解决方法，但你可以在Google上搜索。如果可以的话，我建议使用PNG格式，它包含透明度信息。

其次 - 请尝试阅读PHP文档中的评论部分。这条评论提供了一些有用的信息，你可以使用：

Sina Salek：我刚刚检查了PHP的问题跟踪器，一位核心开发者说这个函数从来没有支持过阿尔法通道！他们拒绝提交提供的补丁！

之后，评论者提供了一个我认为可能可行的示例。

- Kleskowy

---

是的，我实际上需要合并PNG图像，那只是测试而已。 现在我已经使用了PNG图像并将其合并，结果也已更新。 - Suman KC