Resizing base64 Images

php image node.js resize base64

21,944

Solution 1

I agree to the method from Jon Hanna: Do Parsing the Base64code then load it to GD Image before Resample. However to get it back as data it is not as easy as I though. On php in GAE it will need to enable output buffering by setting output_buffering = "On" in php.ini file.

Here I explain the step in detail.

This doc is taken as reference to Create Image Resource using the Parsing of Base64code: http://php.net/manual/en/function.imagecreatefromstring.php

// Create image resource from Base64code
$data64 = 'iVBORw0KGgoAAAANSUhEUgAAABwAAAASCAMAAAB/2U7WAAAABl'
        . 'BMVEUAAAD///+l2Z/dAAAASUlEQVR4XqWQUQoAIAxC2/0vXZDr'
        . 'EX4IJTRkb7lobNUStXsB0jIXIAMSsQnWlsV+wULF4Avk9fLq2r'
        . '8a5HSE35Q3eO2XP1A1wQkZSgETvDtKdQAAAABJRU5ErkJggg==';
$image = imagecreatefromstring(base64_decode($data64));

This is an image resource which can be directly put to the Resample function: http://php.net/manual/en/function.imagecopyresampled.php

// Resample
$image_p = imagecreatetruecolor($new_w, $new_h);
imagecopyresampled($image_p, $image, 0, 0, 0, 0, $new_w, $new_h, $org_w, $org_h);

The result is also an image resource. To get it as a data we need Buffering.
See how to create a base64encoded string from image resource

// Buffering
ob_start();
imagepng($image_p);
$data = ob_get_contents();
ob_end_clean();

Using doc below I set a GCS bucket on my project as a website so I can Store & Display it directly: https://cloud.google.com/storage/docs/website-configuration#tips

//Store & Display
$context = stream_context_create([
   'gs' =>[
        'acl'=> 'public-read', 
        'Content-Type' => 'image/jpeg', 
        'enable_cache' => true, 
        'enable_optimistic_cache' => true,
        'read_cache_expiry_seconds' => 300,
    ]
]);
file_put_contents("gs://mybucket/resample/image.jpeg", $data, false, $context); 
header("Location: http://mybucket/resample/image.jpeg");

Solution 2

Your best bet is to use PHPThumb in PHP.

An alternative is to invoke ImageMagick however you prefer:

Solution 3

No idea how to do that (or well, anything) in node.js, but the PHP bit of your question is certainly possible. After parsing the Base64, load it into a GD image and then resample it.

http://php.net/manual/en/function.imagecopyresampled.php

Solution 4

Maybe you just can use a lib to handle that. Try WideImage. I have used it and worked nicely.

Example:

$image = base64_decode(preg_replace('#^data:image/\w+;base64,#i', '', $req->image));

$thumbnail = WideImage::load($image)
  ->resize(300, 300, 'inside')
  ->crop('center', 'center', 300, 300);

Library Documentation: http://wideimage.sourceforge.net/

View more solutions

21,944

Lukas Olsen

Updated on July 09, 2022

Comments

Lukas Olsen almost 2 years

I have multiple Images - saved as Base64 Strings and now i want to resize these images to get thumbnails of them...

Best would be using Javascript (Node-Server) to resize them, but it would be possible to resize them with php, too.

Thanks in advance
Lukas Olsen over 11 years

well i have no write-rights on my server - how could i link this thumbs to my node.js app? any idea?
Jon Hanna over 11 years

That falls under the "No idea how to do that (or well, anything) in node.js" bit above for me, I'm afraid. Someone else might have a good idea, hopefully.
Lukas Olsen over 11 years

looking for a answer for this for 2 days now... normally it would work fine with node - but in my node-app i have no write-rights, too... that sucks
Jon Hanna over 11 years

Best of luck. I can only answer to the bit I know about.
Lukas Olsen over 11 years

any idea how to access to them in my node.js app after resizing with php?
jcolebrand over 11 years

How are you going to do permanent storage in the future? One thing you can do as an interim solution is to have a app-level global image hashtable element that stores the images as a cache...
Lukas Olsen over 11 years

this app is only for a projet at university - so it never will be needed to do permanent storage - even if i would like to - simplest solution would be spending money and getting write-rights...
garrettlynchirl over 6 years

Worth pointing out as well that imagecopyresampled() produces a much better quality than imagecopyresized() because it interpolates.