HTML / JS: Method only availlable in console?

[Speakerator]

Hi there,

I could use the help of someone who is more experienced in web dev than I am.

 

The bigger picture: I want to enable users of a page to save parts of it as a pdf, simply using the print() method and some CSS styling in @media print. SInce there is a metric ton of CSS that I have no control over, I want to "start fresh", open a new window, insert the bits of html that I want, add a single stylesheet that formats that page for printing, print() and close it again. Not the prettiest way, but it works.

Now for my problem. The page contains a more complex canvas element (utilizing ChartJS). Since I only want to print it, I simply want to insert it as an <img> into the 'print page' by doing something like this:

 

[.....]
var myCanvas = document.getElementById('myChart');
var source = myCanvas.toDataUrl();
var image = "<img src=' " + source + " '></img>"
myWindow.document.write(image);

 

However: this returns a "Uncaught TypeError: myCanvas.toDataUrl is not a function" and yeah, true, somehow document.getElementById('myChart').toDataUrl returns undefined.

 

BUT: and this is, what I cannot get my head around: if I debug this in Chrome and access the myCanvas object in the console, it has and can execute the toDataUrl() just fine.

 

So when I do something like the folliwing:

 

 

[.....]
var myCanvas = document.getElementById('myChart');
// var source = myCanvas.toDataUrl();
var source;
// set a breakpoint here and simply assign 'source' in the chrome console via "source = myCanvas.toDataUrl()"
// and continue executrion
var image = "<img src=' " + source + " '></img>"
myWindow.document.write(image);

 

everything works just fine. 

 

This snipped was taken from the chrome console, just after the myCanvas variable is assigned:

 

> myCanvas
         <canvas height="500" id="myChart" style="display: initial; width: 500px; height: 500px; background-color: rgba(255, 255, 255, 0.8);" width="500">
            </canvas>
> document.getElementById('myChart');
        <canvas height="500" id="myChart" style="display: initial; width: 500px; height: 500px; background-color: rgba(255, 255, 255, 0.8);" width="500">
            </canvas>
> document.getElementById('myChart').toDataUrl;
         undefined
> myCanvas.toDataURL
         toDataURL() { [native code] }

 

Can anybody explain this?

 

Best regards,

Chris

[colonel_mortis]

How have you populated the canvas? If it contains any images that aren't from your domain, you can't call toDataURL because that would allow you to see what that image is, and the image was requested using the user's credentials (cookies etc), so you may be able to use that to figure out information about the user. The image needs to be served from your domain, or include the Cross-Origin Resource Sharing headers.

The console runs with slightly more privilege, so that may be able to bypass the CORS checks.

[squirrl]

Are you running the javascript before the document has rendered? Sounds like a timing issue to me.

[Speakerator]

11 minutes ago, colonel_mortis said:

How have you populated the canvas? If it contains any images that aren't from your domain, you can't call toDataURL because that would allow you to see what that image is, and the image was requested using the user's credentials (cookies etc), so you may be able to use that to figure out information about the user. The image needs to be served from your domain, or include the Cross-Origin Resource Sharing headers.

The console runs with slightly more privilege, so that may be able to bypass the CORS checks.

No, the canvas is created using ChartJS, the libs are located locally on the server, so the "image" is generated on the same page.

I found the error. It's really simple.  And kind of embarassing that I spent like two hours searching for a solution - repeating the same mistake over and over again using auto-complete.

 

look closely:

 

myCanvas.toDataURL     vs.     document.getElementById('myChart').toDataUrl();

.

.

.

 

It's a typo. URL has to be all caps. Simple as that. 

 

I'm gonna need a coffee break right now