Pass Base64 jpeg image to og:image

Question

I have image that is being generated in runtime on my website and I display it in html using

<img src="data:image/jpeg;base64,<!-- base64 data -->" />

Now, I want for Facebook to fetch this image, but if I do the same for og:image meta tag, facebook debugger gives me an error. Any solution?

<meta property='og:image' content='data:image/jpeg;base64,<!-- base64 data -->'/>

Of course, I would like to avoid permanent saving of files since they are always different and it would get too crowded very quickly

Icterus

Answer 1

Paste it to a PHP file that echos it out:

    <meta property='og:image' content='decoder.php?data=<!-- base64 data -->'/>

decoder.php:

    <?php
        echo base64_decode($_GET['data']);
    ?>

EDIT Make sure you check source for security reasons.

Twobit

this seems like good solution. Just one question. Won't the url for decoder.php be too long? – Prosecute

shouldn't be problem in new browsers (and for fb!) – Twobit

@Twobit I have the following error: 414 (Request-URI Too Large) – Pemphigus

@Pemphigus Yep, I'm getting 414 too: #2892074 (hint: use smaller images or change server configuration) – Preadamite

@AugustinRiedinger just change the endpoint to a nodeJS endpoint. The language isn't important, it is just doing a get request. This is highly inefficient, but an interesting solution. – Calumnious

Answer 2

Open Graph needs an URL.

You could try saving your base64 as a temp image.

Capitation

How, could I do this? I have tried this $temp = tmpfile(); fwrite($temp, "data:image/jpeg;base64,".$data); But then i have resource. – Prosecute

temp files will not be always available. They may be deleted in any time. – Tripetalous

Answer 3

If the images is saved in a db as a blob you can get the image using the following:

image_generator.php:

$imageID = $_GET['id'];

$image = // Fetch the image from database using an id;

// Set the appropriate content type for the image (e.g., JPEG)
header('Content-Type: image/jpeg');
    
// Output the image data directly
echo $image;

og tag creation:

$imageID = // id referred to the image
$imageUrl = "https://yoururl/image_generator.php?id=$imageID";
echo "<meta property='og:image' content='$imageUrl' />

Locker