Question

我想两个人显示一个图表，也显示一个带有更大图表链接的网址。小预览图像看起来很好用：

<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元素）的原因。响应式设计的原因是没有固定的图像。无论如何，这完美地运作。对于＆＃34;更大＆＃34;的URL我希望有URL。我知道 toDataURL（）会有所帮助。

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

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

这种方式的网址存在，但图片没有内容。
我还想给canvas-image一个新的大小，比如我用 ct1.canvas.width 和 ct1.canvas.height 进行管理，但似乎我无法将此添加到 toDataURL 。

代码有什么问题？

Answer 1

好的，我想我明白了。 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;
}

我认为就是这样。

canvas.toDataURL（） - 用于更大的画布图像

1 个答案: