HTML 5 Canvas zeigt bestimmte Teile nicht an toDataUrl

Question

Ich mache ein Diagramm im Google-Diagramm und wandle es dann in ein Bild um, das .getImageURI() verwendet.

Dieses Ergebnis wird dann als Parameter in einem onClick() Ereignis in einer Schaltfläche übergeben. Wenn der Benutzer auf eine Schaltfläche klickt, wird das Diagramm zu einer Arbeitsfläche hinzugefügt, zusammen mit einigen Informationen zum Bild, z. B. zu dem Datum, an dem Daten geplottet werden.

jedoch, wann immer ich dieses Bild an einen png konvertieren und erhalten die Benutzer es zum Download unter Verwendung var dt = c.toDataURL('image/png'); dann window.open(dt); alles, was ich bekommen, ist der Text, den ich hinzugefügt.

Auch wenn ich es in ein JPEG mache und die gleichen Methoden benutze, wenn ich es als Tag in meiner Seite es alles zeigt, Diagramm und Text. Aber wenn ich versuche, es nur herunterzuladen, lädt das Diagramm herunter.

Ich habe nichts gegen beide Dateitypen, ich möchte nur das Bild mit dem Text herunterladen.

Das ist mein Ruf auf die Schaltfläche mit der Google-Diagrammdaten URL zu erhalten:

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

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

dann die turnToImage() Funktion, die relevanten Informationen sammelt und fügt einen Text und das Google-Diagramm a leinwand:

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+"'>"); 
} 

Answer 1

Sieht aus wie Sie nicht auf die img onload zu fi warten nish. alle Code muss nach dem onload sein, versuchen Sie:

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+"'>"); 
    } 

} 

Obwohl ich das offene Fenster Methode funktioniert nicht denken, es könnte der Browser blockieren, könnten Sie eine Abhilfe benötigen.