Save Base 64 memo field string as .PNG

Topics: Developer Forum, User Forum
Dec 6, 2012 at 4:47 AM


I'm working HTML5 saving a captured webcam image.

In Javascript:
function snapshot()
{
    canvas.width = video.videoWidth;
    canvas.height = video.videoHeight;
    canvas.getContext('2d').drawImage(video, 0, 0);
    var imgData = canvas.toDataURL('image/png');
    document.AddJob.cPic1.value = imgData;
}

At this point I save the Base 64 string [oSession.value("cPic1")] to a foxpro Memo field.

 But now how do I save the Base 64 string to a .PNG file?
 
 The memo field contents looks like:

data:image/png;base64,iVBORw0K......
 
 Like that for another 350,000 characters.

Dec 6, 2012 at 3:05 PM

The answer is trivial. Don't include 'image/png':

{
    canvas.width = video.videoWidth;
    canvas.height = video.videoHeight;
    canvas.getContext('2d').drawImage(video, 0, 0);
    var imgData = canvas.toDataURL();
    document.AddJob.cPic1.value = imgData;

}

REPLACE jobs->picture1 WITH  oSession.value("cPic1")

Then you can:

STRTOFILE(  STRCONV( jobs->Pic1,14) , "IMAGE.PNG" )

And you have an uploaded picture.

Now to wait for iOS6/Safari and Android to fully support WebRTC/GetUserMedia

Coordinator
Dec 6, 2012 at 7:36 PM

How do you display the image in your pages if you are allowing it?  I have a scenario where I have list of images that will be a hyperlink to an image but is in different folder/location.

Dec 7, 2012 at 3:42 PM

Not sure if you're having a problem with the link or the different folder location.I'll assume the folder location.

I've added some code in the AVFPInit Function of MAIN.PRG:

    oProp.InvPixPath = lcAVFP_Host+[/DATA/]+ ALLTRIM(lcAVFP_Path) +[/IMAGES/INV/]

So it's easier to reference folders

You may want something like

    oProp.InvPixPath = lcAVFP_Host+[/DATA/]+ ALLTRIM(lcAVFP_Path) +[/IMAGES/INV/]

    oProp.InvThumbPath = lcAVFP_Host+[/DATA/]+ ALLTRIM(lcAVFP_Path) +[/IMAGES/INVTHUMBS/]

so it's easier to reference   oProp.InvThumbPath  vs oProp.InvPixPath

This is assuming the picture folders are subfolders of the root. If they're not, Claude mentioned you can reference other network paths using the UNC: http://activevfp.codeplex.com/discussions/352753

But I've never tried that.

~~~~~~~~~~~~~~~~~~~~~

I have a scenario where I have list of images that will be a hyperlink to an image but is in different folder/location.

Coordinator
Dec 7, 2012 at 7:44 PM
Edited Dec 7, 2012 at 8:06 PM

Yeah, the problem is it's stored not inside the root.  The solution from Claude's post is specifically for DBF's.  What I'm trying to do is create a page where it will list links which are actually images stored in various folder on the webserver, it can also be in a different server but mapping is available already.  I'm actually reading the File API and see if this will work for my requirement.

I just thought of something though, looking at the PDF reporting sample.  I can probably just copy the file and save it under a temp folder inside the root.  This would work I think but I haven't tough of it's efficiency though.

Developer
Oct 10, 2014 at 11:16 PM
Markmxlxx .. Thank You.. Great post.. Now I can reduce the size of images at client itself. With file compression, it makes a big diff in storage and page load. If anyone is doing mobile programming in activevfp, that a look at this.