How to display a BASE64 encoded jpg image

6,545 views
Skip to first unread message

Mauritz Zondagh

unread,
Apr 19, 2017, 4:52:20 PM4/19/17
to DroidScript
Following my post on using a contact vcf file to display a contact image, i found that the image is stored as a BASE64 string in the vcf file.
If i extract the image string from the vcf file, how can i display the image.
Something like this?
var encodedDataString = "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQAB ext"

encodedDataString = encodedDataString.replace("data:image/jpeg;base64,","");
imgView = app.CreateImage(null, 0.3, 0.3);
lay.AddChild( imgView );
var dec = atob(encdoedDataString);
//    imgView.setImageBitmap(dec); ???
// imgView.setImage(dec,0.3,0.3); ???


Thanks

Symbroson Development

unread,
Apr 20, 2017, 2:24:16 AM4/20/17
to DroidScript
It works if you just type that into you r browser as url. So theoretically it should work via an webview.
Here's a valid base64 encoded pic for you because yours isn't working:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAABHNCSVQICAgIfAhkiAAAAHFJREFUWIXt1jsKgDAQRdF7xY25cpcWC60kioI6Fm/ahHBCMh+BRmGMnAgEWnvPpzK8dvrFCCCAcoD8og4c5Lr6WB3Q3l1TBwLYPuF3YS1gn1HphgEEEABcKERrGy0E3B0HFJg7C1N/f/kTBBBA+Vi+AMkgFEvBPD17AAAAAElFTkSuQmCC

Regards

Mauritz Zondagh

unread,
Apr 20, 2017, 4:40:54 AM4/20/17
to DroidScript
Hi

Thank you this is a good suggestion. Was not aware that the BASE64 string can be pasted into a Browser for display.
I managed to display the image with a html file and LoadUrl - maybe there is an easier way, but this is the only way i could get the icon to display.

There is still some work to be done, need to create a HTML file from the Contact card vcf file dynamically when the main app receives a shared vcf file.
        web = app.CreateWebView( 0.8, 0.8 );
   lay.AddChild( web );
   web.LoadUrl( "file:sdcard/Droidscript/TestShare/Image.html" );

And the Image.html file

<html>
   <head></head>
   <body>
       <canvas id="c"></canvas>
       <script type="text/javascript" src="canvas2image.js"></script>
       <script type="text/javascript" src="baseg4.js"></script>
       <script type="text/javascript">

            var canvas = document.getElementById("c");
           var ctx = canvas.getContext("2d");

            var image = new Image();
           image.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAABHNCSVQICAgIfAhkiAAAAHFJREFUWIXt1jsKgDAQRdF7xY25cpcWC60kioI6Fm/ahHBCMh+BRmGMnAgEWnvPpzK8dvrFCCCAcoD8og4c5Lr6WB3Q3l1TBwLYPuF3YS1gn1HphgEEEABcKERrGy0E3B0HFJg7C1N/f/kTBBBA+Vi+AMkgFEvBPD17AAAAAElFTkSuQmCC";
           image.onload = function()
           {
              ctx.drawImage(image, 0, 0);
               <!--var foo = Canvas2Image.saveAsPNG(canvas); -->
            };
           var img = canvas.toDataURL("image/png");
       </script>
   </body>
</html>




Mauritz Zondagh

unread,
May 6, 2017, 2:12:27 PM5/6/17
to DroidScript
Reply all
Reply to author
Forward
0 new messages