1

I have three images, with the aim of making the first image a base while the two other images are placed on it. With the second image placed at the left corner (almost to the top) while the third image is placed nearly to the bottom of the right corner with a text inscription under it.

It is an API based application, I am writing to JSON (http://127.0.0.1:8000/api/upload)

More also I have tried to use intervention image but I encountered a serious problem with the error as regards array expected instead of string and more also insert() is complaining of the column not found. That is why was I used raw PHP.

The First Image should cover the black background

enter image description here

The second image should be placed to the right (nearly top) corner

enter image description here

The Third Image is expected to be placed at the left bottom corner while the text will be wrapped under it.

my controller image is rendering the image scattered with the text above the image instead of under.

enter image description here

   public function upload(Request $request)
        {
            $x=$y=600;
                header('Content-Type: image/png');
                // $targetFolder = '/app/uploads/images/';
                // $targetPath = $_SERVER['DOCUMENT_ROOT'] . $targetFolder;

            $validation = $request->validate([
                        'title' => 'string',
                        'image' => 'required|file|image|mimes:jpeg,png,gif,webp|max:2048'
                    ]);

            $file      = $validation['image']; // get the validated file
            $extension = $file->getClientOriginalExtension();
            $filename  = 'mm-image-' . time() . '.' . $extension;
            $path      = $file->storeAs('/uploads/images', $filename);
            $image = storage_path('app/uploads/images/mm-image-1552822080.png');
            $c = storage_path('app/uploads/images/mm-image-1552936505.png');
            $im3 = file_get_contents($request->image);
            $outputImage = imagecreatetruecolor(600, 600);

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

                $first = imagecreatefrompng($image);
                $second = imagecreatefrompng($c);
                $third = imagecreatefromstring($im3);

                //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,300,300,0,0, 100, 100, $x, $y);

                // 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 = storage_path('app/public/tahoma.ttf');
                imagettftext($outputImage, 16, 0, 300, 300, $white, $font, $text);

                $filename =storage_path('app/uploads/images/'.round(microtime(true)).'.png');
                imagepng($outputImage, $filename);

                imagedestroy($outputImage);
           }

The expected Output enter image description here

3
  • Well, you could use a div with a background image corresponding to the yellow one. Then inside the div you could arrange your inner images using flexbox. Mar 19, 2019 at 15:14
  • Sorry, I didn't mention, it is an API. I am writing to JSON, already created an endpoint
    – Payne
    Mar 19, 2019 at 15:51
  • you can do that with help of image.intervention.io make image with background insert other image's with size and position xy location Mar 22, 2019 at 5:31

1 Answer 1

1
+50

As said in the comments by Gaurav Gupta, I suggest you to use Intervention Image PHP package which encapsulate all the GD methods into something easy to use (You can use Imagick also).

You could do something like this :

public function upload(Request $request)
{       
    $x=$y=600;
    $imageMerge = new ImageMerge();
    header('Content-Type: image/png');
    $validation = $request->validate([
        'title' => 'string',
        'image' => 'required|file|image|mimes:jpeg,png,gif,webp|max:2048'
    ]);
    $file      = $request->file('image')->getClientOriginalName();
    $extension = $request->file('image')->getClientOriginalExtension();
    $hash      = Str::random(10);
    $filename  = 'mm-image-' . $hash . '.' . $extension;
    $path      = $file->storeAs('/uploads/images', $filename, ['disk' => 'public']);
    $image     = storage_path('app/uploads/images/mm-image-1552822080.png');
    $c         = storage_path('app/uploads/images/mm-image-1552936505.png');
    $im3       = file_get_contents($request->title);

    $logo = Image::make($file);
    $background = Image::make($image);
    $person = Image::make($c);

    // Resize the picture to insert to the good size
    $logo->resize(200, 320);
    $person->resize(300, 200);

    // Insert those pictures in the background to a specific position with some padding
    $background->insert($person, 'left', 30, 0);
    $background->insert($logo, 'right', 30, 0);

    // Draw white filled rectangle for the text
    $background->rectangle(0, 0, 0, 0, function ($draw) {
        $draw->background('#FFFFFF');
    });

    // use callback to define details
    $background->text($im3, 0, 0, function($font) {
        $font->file(storage_path('app/public/tahoma.ttf'));
        $font->size(24);
        $font->color('#000000');
        $font->align('center');
    });

    // Resize image to specific output size
    $background->resize($x, $y);

    $exportName = 'file-'.$hash.'.'.$extension;
    Storage::disk('public')->put('/uploads/final/'.$exportName, $background);

    $imageMerge->image = $exportName;
    $imageMerge->save();
}

This is not a finished script. You still need to calculate all the exact position of elements and verify all the storage paths to be sure every file is imported correctly but in the end Intervention Image is really easy to use.

Here's the methods we used in the documentation so that you can tweak them to your needs :

15
  • I am also trying to save it to the specified location and also database
    – Payne
    Mar 22, 2019 at 13:42
  • Check the code again, it was supposed to be $background
    – dib258
    Mar 22, 2019 at 16:27
  • Ok, but the text is displaying likewise the background drawn in white rectangular . I have changed it to $background
    – Payne
    Mar 22, 2019 at 17:07
  • You are saying that the text has the same color as the background ? To store the picture in the storage and database you have to make something like : Storage::disk('public')->put($filename, $background); and store the $filename in the database, you'll be able to retrieve it from yourwebsite.com/storage/mypicture.jpg if you symlinked the folder with php artisan storage:link
    – dib258
    Mar 22, 2019 at 17:09
  • how to save to the database? I have saved to the directory using public_path('/uploads/images/file'.$i.'.png')
    – Payne
    Mar 22, 2019 at 17:14

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.