extract text from canvas panel which has been encoded in base64

Question

I have geotagged an image by using html canvas and using context.filltext to store longitude and latitude and context.drawimage to store the image. I have then used the todataURL() function to encode the canvas in base64 which I have saved to my database. I have then loaded this data from my database, is there a way to decode the data and extract the longitude and latitude in javascript?

Unknown Unknown · Accepted Answer · 2014-01-27T19:22:49

No, what you have is a simple image file as any other image file. Canvas does not separate the graphics you draw to it incl. text (which becomes rasterized).

You have to either:

Supply the data as meta data to your server
Run OCR on you image is this meta data is not an option (not related to canvas or html5 per-se).
Send the original image to server and extract EXIF data there as well as make a burn-in.

You can for example create an object which contains your data-uri from toDataURL() and the long/lat data:

var geoImage = {
    image: canvas.toDataURL(),
    longitude: "xxxx",
    latitude: "yyyy"
}

Then encode it as JSON and send that to server:

var serverString = JSON.stringify(geoImage);

OCR as the other option is something I would only recommend if you don't have access to the original long/lat data. With some experience in the field I know you are in for quite a few challenges however and its not stable. A very good OCR module cost a lot of money and the cheaper ones will give you many errors. It also depends on how you draw the text on the image if the background is clear, the typeface is easy to analyze and so forth.

The obvious third option is perhaps better for quality reasons. When you draw your image onto canvas and then extract it you will loose quality. As most cameras store images only as either JPEG or RAW you will only have a single option with canvas, JPEG, which means it needs to be re-compressed with "lossy" compression. You can of course extract as PNG but that will increase the file size in most cases.

You can extract the EXIF data at server side as well. You can then store the original image together with a burn-in version.

extract text from canvas panel which has been encoded in base64

2 Answers