HTML 5 canvas not showing certain parts when toDataUrl

Question

I am making a chart in google chart and then converting that into an image using .getImageURI().

This result is then passed as a parameter in a onClick() event in a button. When the user presses a button the chart gets added to a canvas along with some about the image, such as what is being plotted any dates.

However when ever I convert this image to a png and get the user to download it using var dt = c.toDataURL('image/png'); then window.open(dt); all I get is the text I added.

Also when I make it into a jpeg and use the same methods if I add it as a <img> tag in my page it all shows up, chart and text. But when I try to download it just the chart downloads.

I don't mind either file type, I just want to download the image with the text.

This is my call to get the button with the google chart data url:

var image = stockChart.getChart().getImageURI();

document.getElementById('png').innerHTML = '<button onClick="turnToImage(\''+image+'\', \''+$('#totalNumber').html()+'\')">Get Image</button>';

Then the turnToImage() function that gathers relevent information and adds some text and the google chart to a canvas:

function turnToImage(chart, totalNum) {
    var pound = '\u00A3';
    var width = $(document).width();
    var height = $(document).height();
    var total = "Total: "+pound+totalNum;
    channels3 = channels2.substring(0, channels2.length - 1);
    var canvasText = total + " | Type: " + allNone + " | Channels: " + channels3 + " | Grouped By: " + grouping + " | Cumulative: " + cumulative + " | Dates: " + startDate + " - " + endDate;

    var canvas = '<canvas id="chartImage" width="'+width+'" height="'+height+'"></canvas>';
    $("#canvasHolder").html(canvas);

    var c = document.getElementById("chartImage");
    var ctx = c.getContext("2d");
    ctx.font = "15px Helvetica";

    img = new Image();
    img.src = chart;
    img.onload = function() {
        ctx.drawImage(img, 0, 20);
    }
    ctx.fillText(canvasText, 10, 15);

    var dt = c.toDataURL('image/png');

    window.open(dt);

    $("#canvasHolder").html("<img src='"+dt+"'>");
}

here is a working example: https://jsfiddle.net/kujxsn7z/ , you might want to check the order you fire things. without code its hard to say what is wrong. — Andrew Monks, Feb 10 '17 at 12:12
I can get the chart as an image, but I get issues when I add the chart (as an image) to a canvas and try to download it — Ryan, Feb 10 '17 at 12:13

score 1 · Accepted Answer · answered Feb 10 '17 at 12:17

1

Looks like your not waiting for the img onload to finish. all code needs to be after the onload, try:

function turnToImage(chart, totalNum) {
    var pound = '\u00A3';
    var width = $(document).width();
    var height = $(document).height();
    var total = "Total: "+pound+totalNum;
    channels3 = channels2.substring(0, channels2.length - 1);
    var canvasText = total + " | Type: " + allNone + " | Channels: " + channels3 + " | Grouped By: " + grouping + " | Cumulative: " + cumulative + " | Dates: " + startDate + " - " + endDate;

    var canvas = '<canvas id="chartImage" width="'+width+'" height="'+height+'"></canvas>';
    $("#canvasHolder").html(canvas);

    var c = document.getElementById("chartImage");
    var ctx = c.getContext("2d");
    ctx.font = "15px Helvetica";

    img = new Image();
    img.src = chart;
    img.onload = function() {
        ctx.drawImage(img, 0, 20);

        ctx.fillText(canvasText, 10, 15);

        var dt = c.toDataURL('image/png');

        window.open(dt);

        $("#canvasHolder").html("<img src='"+dt+"'>");
    }

}

Although I don't think the open new window method will work, the browser might block it, you might need a workaround.

answered Feb 10 '17 at 12:17

Andrew Monks

656
4
11

I'm now struggling to make it download automatically, any tips? – Ryan Feb 10 '17 at 13:06
make the data url ( c.toDataURL('image/png') ) after the chart is generated. Then when the user clicks just open the result in a window. – Andrew Monks Feb 10 '17 at 13:22
I've got that, I want to image to automatically download – Ryan Feb 10 '17 at 13:31
what is it doing now? – Andrew Monks Feb 10 '17 at 13:34
Like you said, it opens the image on a new tab – Ryan Feb 10 '17 at 13:35
http://stackoverflow.com/questions/17527713/force-browser-to-download-image-files-on-click – Andrew Monks Feb 10 '17 at 13:38

HTML 5 canvas not showing certain parts when toDataUrl

1 Answers1