Javascript 带有toDataURL（）的多个画布图像（通过Chart.js）

如何处理两个或多个链接的画布图表？使用此脚本，画布图像链接到更大的版本，以在fancybox中显示大文件，或者仅下载两个（右键单击->保存）。简单

稍后在脚本中，当动画结束时，它将启动/更改新的HREF

var ct1 = document.getElementById("image1").getContext("2d");
ct1.canvas.width = document.getElementById("image1").offsetWidth;
ct1.canvas.height = document.getElementById("image1").offsetHeight;
var Chart1  = new Chart(ct1).Line(lineChartData1,options);

function done() {
var url1=document.getElementById("image1").toDataURL();
document.getElementById("canvas_link_1").href=url1;
}

var ct2 = document.getElementById("image2").getContext("2d");
ct2.canvas.width = document.getElementById("image2").offsetWidth;
ct2.canvas.height = document.getElementById("image2").offsetHeight;
var Chart2  = new Chart(ct2).Line(lineChartData2,options);

function done() {
var url2=document.getElementById("image2").toDataURL();
document.getElementById("canvas_link_2").href=url2;
}

这很有效。但只能使用一张画布图像。如果我删除第二个函数done（），它将与第一个画布一起工作，如果我删除第一个函数，则只有第二个画布显示url

我认为问题在于“完成”，它不是一个名字，就像一种情况，或者？“var选项”适用于所有画布图像（当然我可以更改为选项1和选项2，也可以更改为“Line（lineChartData1，options 1）”，但不做任何更改）。。。所以“done”将启动所有函数，而且——这很糟糕——显然只有最后一个函数

---

另一方面，我无法重命名onAnimationComplete的条目。它是空的或完成的，没有别的。怎么办？

您可以使用不同的名称进行不同的回调。“done”只是一个示例名称（更好的名称可能是“completed”）

例如-首先创建两个选项对象，每个图表一个：

var options1 = { 
    onAnimationComplete: done1
};

var options2 = { 
    onAnimationComplete: done2
};

然后使用以下内容初始化图表：

...
var Chart1  = new Chart(ct1).Line(lineChartData1, options1);

...
var Chart2  = new Chart(ct2).Line(lineChartData2, options2);

最后定义回调：

function done1() {
    var url = document.getElementById("image1").toDataURL();
    document.getElementById("canvas_link_1").href = url;
}

function done2() {
    var url = document.getElementById("image2").toDataURL();
    document.getElementById("canvas_link_2").href = url;
}

---

希望这有帮助（并且我正确理解了这个问题）

太棒了，是的，它解决了问题！非常感谢你。也许还有一个问题（我可以开始一个新的线程吗？）：链接会导致画布的更大版本。在上面的脚本中，toDataURL（for HREF）将生成与canvas元素中相同的内容。但是对于链接，我希望使用不同的“ct1.canvas.width”和“ct1.canvas.height”。@user3520414 toDataURL将始终使用画布的当前大小，因此唯一的方法是增加画布的大小。如果在布局方面出现问题，您可以使用CSS强制一个画布缩小到显示大小，同时保留您想要/需要的位图大小。

...
var Chart1  = new Chart(ct1).Line(lineChartData1, options1);

...
var Chart2  = new Chart(ct2).Line(lineChartData2, options2);

function done1() {
    var url = document.getElementById("image1").toDataURL();
    document.getElementById("canvas_link_1").href = url;
}

function done2() {
    var url = document.getElementById("image2").toDataURL();
    document.getElementById("canvas_link_2").href = url;
}