1

我想两个显示一个图表，并提供一个带有指向更大图表的链接的 url。小预览图像看起来和工作正常：

<canvas id="image"></canvas>

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

画布被包裹在一个 div 中，这就是为什么offsetWidth和offsetHeight（填充这个额外的 div 元素）。响应式设计的原因是没有固定的图像。无论如何，这完美无缺。对于“更大”图像的 URL，我想要 URL。我知道toDataURL()会有所帮助。

var url = document.getElementById("image").toDataURL();
document.write(url);

它有两个令人不安的问题：

  1. 这种方式的网址是存在的，但是图片没有内容。
  2. 我也想给画布图像一个新的大小，就像我用ct1.canvas.width和ct1.canvas.height管理一样，但似乎我无法将它添加到toDataURL。

代码有什么问题？

4

1 回答 1

0

好吧，我想我明白了。Chart.js正在为图表设置动画，因此我在第一个问题中提到的 toDataURL() 只呈现了一个空图像。我们必须启动 toDataURL，而不是在动画完成之前。我们使用以下选项处理：

var options = { 
onAnimationComplete: done
}

和一个小功能：

function done() {
console.log('done');
var url=document.getElementById("canvas").toDataURL();
document.getElementById("canvas_link").href=url;
}

我想就是这样。

于 2014-04-15T12:52:56.623 回答