Pass Base64 Jpeg Image to Og:Image

Pass Base64 jpeg image to og:image

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.

Amazon S3 base64 Image is not working on og:image tags though bucket is public

It really bad that no one suggested me.

So what my findings and what is the solution that resolved my issue is that when we upload the base64 image from server to s3 then there is a header attached on the image which is

content-encoding: base64

We need to remove this from the image on s3. Tested it and it now show on og tags.

Upload Base64 Image Facebook Graph API

The code above didn't quite work for me (Missing comma after type:"POST", and data URI to blob function reported errors. I got the following code to work in Firefox and Chrome:

function PostImageToFacebook(authToken)
{
    var canvas = document.getElementById("c");
    var imageData  = canvas.toDataURL("image/png");
    try {
        blob = dataURItoBlob(imageData);
    }
    catch(e) {
        console.log(e);
    }
    var fd = new FormData();
    fd.append("access_token",authToken);
    fd.append("source", blob);
    fd.append("message","Photo Text");
    try {
        $.ajax({
            url:"https://graph.facebook.com/me/photos?access_token=" + authToken,
            type:"POST",
            data:fd,
            processData:false,
            contentType:false,
            cache:false,
            success:function(data){
                console.log("success " + data);
            },
            error:function(shr,status,data){
                console.log("error " + data + " Status " + shr.status);
            },
            complete:function(){
                console.log("Posted to facebook");
            }
        });
    }
    catch(e) {
        console.log(e);
    }
}

function dataURItoBlob(dataURI) {
    var byteString = atob(dataURI.split(',')[1]);
    var ab = new ArrayBuffer(byteString.length);
    var ia = new Uint8Array(ab);
    for (var i = 0; i < byteString.length; i++) {
        ia[i] = byteString.charCodeAt(i);
    }
    return new Blob([ab], { type: 'image/png' });
}

Here's the code at GitHub
https://github.com/DanBrown180/html5-canvas-post-to-facebook-base64

---

Related Topics