Do i have a upload a base64 image to a folder before i can use it in the rest of the script?

[Noppy]

Hi,

I’m trying to create an upload form where the user uploads an image which is then combined with a png overlay.

I have both parts working separately. I’m using croppie.js so the user can crop their image and it then passes the cropped image as a base64 image which i can then save to a folder. this works fine but i can’t work out how to add in the overlay part before saving it.

I’m not sure if i can use the base64 image in the overlay script without first uploading it as an image to my server. I was hoping not to do this as i’d have to clean up that image when i make the final combined overlay image.

this is the script that uploads the image

$img = $_POST['imagebase64'];
$img = str_replace('data:image/png;base64,', '', $img);
$img = str_replace(' ', '+', $img);
$data = base64_decode($img);
$file = "upload/" . uniqid() . '.png';
$success = file_put_contents($file, $data);

echo '<img src="https://www.example.co.uk/project/'.$file.'">';

I’m using this script for the overlay https://www.php.net/manual/en/image.examples-watermark.php

<?php
// Load the stamp and the photo to apply the watermark to
$stamp = imagecreatefrompng('stamp.png');
$im = imagecreatefromjpeg('photo.jpeg');

// Set the margins for the stamp and get the height/width of the stamp image
$marge_right = 10;
$marge_bottom = 10;
$sx = imagesx($stamp);
$sy = imagesy($stamp);

// Copy the stamp image onto our photo using the margin offsets and the photo 
// width to calculate positioning of the stamp. 
imagecopy($im, $stamp, imagesx($im) - $sx - $marge_right, imagesy($im) - $sy - $marge_bottom, 0, 0, imagesx($stamp), imagesy($stamp));

// Output and free memory
header('Content-type: image/png');
imagepng($im);
imagedestroy($im);
?>

I tried using $data as the $im but it fails as it doesn’t understand it as ‘of type GdImage’. Can i somehow create a temporary image from the base64 upload to use in the second script?

Hopefully that makes sense.

any help appreciated

[droopsnoot]

What about imagecreatefromstring($data) after you’ve decoded the base64, does that get anywhere?

[Noppy]

good call!

I was working a bit on this already but your comment made me realise i should call imagecreatefromstring() later than i was doing it.

this now works and does what i need

<?php

$img = $_POST['imagebase64'];
$img = str_replace('data:image/png;base64,','',$img);
$img = str_replace(' ', '+', $img);
$data = base64_decode($img);

// Load the stamp and the photo to apply the watermark to

//this is the bit i changed which made it work as it was jpeg or png and now string.
//$im = imagecreatefromjpeg('demo-1.jpg');
$im = imagecreatefromstring($data);

$stamp = imagecreatefrompng('overlay.png');
// Set the margins for the stamp and get the height/width of the stamp image
$marge_right = 10;
$marge_bottom = 10;
$sx = imagesx($stamp);
$sy = imagesy($stamp);

// Copy the stamp image onto our photo using the margin offsets and the photo 
// width to calculate positioning of the stamp. 
imagecopy($im, $stamp, imagesx($im) - $sx - $marge_right, imagesy($im) - $sy - $marge_bottom, 0, 0, imagesx($stamp), imagesy($stamp));
//imagecopymerge($im, $stamp, imagesx($im) - $sx - $marge_right, imagesy($im) - $sy - $marge_bottom, 0, 0, imagesx($stamp), imagesy($stamp), 50);

// Output and free memory
//header('Content-type: image/png');
$new_image = 'upload/TEST'.uniqid().'.png';
if(imagepng($im,$new_image)){echo 'success <img src="https://www.example.com/project/'.$new_image.'">'.$new_image.'';}else{echo 'nope';}
imagedestroy($im);

?>

Am I correct in thinking this is relatively safe from hacking as anyone uploading a dodgy file will find it fails as it is subjected to base64_decode and won’t be able to create an image?

Thanks