Question

我在谷歌图表中创建一个图表，然后使用.getImageURI()将其转换为图像。

然后，此结果将作为参数传递到按钮中的onClick()事件中。当用户按下按钮时，图表会被添加到画布以及一些关于图像的内容，例如任何日期的绘制内容。

但是，当我将此图片转换为png并让用户使用var dt = c.toDataURL('image/png');然后window.open(dt);下载时，我得到的就是我添加的文字。

此外，如果我将其添加到jpeg并使用相同的方法，如果我在页面中将其添加为<img>标记，则会显示，图表和文本。但是当我尝试下载时，只需下载图表。

我不介意任何一种文件类型，我只想下载带有文字的图片。

这是我打电话获取带有谷歌图表数据网址的按钮：

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

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

然后turnToImage()函数收集相关信息并将一些文本和谷歌图表添加到画布：

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

看起来你不等待img onload完成。所有代码都需要在onload之后，尝试：

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

}

虽然我不认为开放的新窗口方法可行，但浏览器可能会阻止它，您可能需要解决方法。

在toDataUrl

1 个答案: