Thursday, 21 March 2019

How to merge multiple images with size and position of specificity into a single image with text inscription (API)

I have three images, with 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 serious problem with the error as regards array expected instead of string and more also insert() is complaining of column not found. That is why was I used raw PHP.

First Image This first image should cover the black background enter image description here

The second image 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

Thank you so much



from How to merge multiple images with size and position of specificity into a single image with text inscription (API)

No comments:

Post a Comment