The aim of this code is to transfer a web image into webMathematica for image manipulation. Since the question here failed to resolve direct URL loading, I tried a different method of extraction involving converting the image to a Base-64 string and passing the data directly to the webMathematica jsp.

Attempting to import a canvas image element Base-64 string into Mathematica fails, with it giving the error

Import::fmterr: Cannot import data as PNG format

The base-64 text string was exported using the Javascript function:

function convertImageToCanvas(image) {
    var canvas = document.createElement("canvas");
    canvas.width = image.width;
    canvas.height = image.height;
    canvas.getContext("2d").drawImage(image, 0, 0);
    return canvas;
var canv  = convertImageToCanvas(document.getElementById("image"));
var dataUrl = canv.toDataURL();

The beginning segment of the data imported is shown:

  • 2
    $\begingroup$ What do you mean "failed to resolve"? Your other question is merely 2 hours old... $\endgroup$
    – rm -rf
    Apr 4, 2013 at 16:32

2 Answers 2


Given dataUrl, the output of canv.toDataURL(), this works:

 StringDrop[dataUrl, StringLength["data:image/png;base64,"]], 

You can specify {"Base64", "PNG"} instead if you like, ImportString seems to auto-detect the type anyway.

Within Mathematica, you can get a test dataUrl value here, by clicking "Show in textarea" and copy/paste: http://tutorials.jenkov.com/html5-canvas/todataurl.html


There is no problem importing base-64 encoded images into Mathematica. Here is an example:

a = Import["ExampleData/rose.gif"];
Export["a.b64", a, {"Base64", "PNG"}];
Import["a.b64", "Base64"]


The data that you create with your JavaScript function are in the form of a URL that then gets translated by a browser to a displayed PNG image. You have to strip away the URL prefix from the string that you seem to have exported in your example. This would best be done before even exporting this as a file, because that file with the prefix data:image/png;base64, is simply not a valid base-64 file. The valid code is everything that follows that prefix.

It's easy to strip this off within Mathematica, but I'll not include this here because, as I said, you should do this at an earlier stage.

  • $\begingroup$ Merely stripping the data: section does not work. I have tried removing the tag by a substring, which failed with the same error. Apparently Mathematica's Export function gives completely different data. Using turtle.jpg, the Javascript Canvas base-64 encode gives data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAAA6 $\endgroup$
    – March Ho
    Apr 4, 2013 at 17:53
  • $\begingroup$ I've used this extensively, e.g., in this answer. So I see no reason why it shouldn't work for you. Something must be wrong on the JS side of your program, but that's beyond the scope of this list because you're generating the base-64 file incorrectly, but not in Mathematica. $\endgroup$
    – Jens
    Apr 4, 2013 at 18:00
  • $\begingroup$ I just had one additional thought: maybe it has to do with line breaks in your exported file. But since I don't have your exported file, I can't say more. $\endgroup$
    – Jens
    Apr 4, 2013 at 18:03
  • $\begingroup$ I tried out both methods, and the first segments of JS base-64 encode alert(dataUrl) gives iVBORw0KGgoAAAANSUhEUgAAAMgAAAA5CAYAAABzlmQiAAAgA while the Mathematica base-64 encode ExportString[picture, {"Base64","PNG"}] gives iVBORw0KGgoAAAANSUhEUgAAAMgAAAA5CAIAAAD89PN1A which is a completely different string. Why is this so? $\endgroup$
    – March Ho
    Apr 4, 2013 at 19:35
  • $\begingroup$ I can't make a blind guess. How are you exporting the JS code? Can you see the image in the browser if you call window.open(dataURL,'','left=0,top=10,width=500,height=600,toolbar=0,location=0,resizable=0');? $\endgroup$
    – Jens
    Apr 4, 2013 at 20:11

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.