显示图表的 base64 图像。我有一个我创建的简单图表。创建它后，我想获取它的 base64 图像并将其显示在 html 中，但我无法做到这一点。HTML<body> <canvas id="chartJSContainer" width="100" height="100"></canvas> <img src="" id="coolImage" class="img-fluid" alt="Responsive image"></body>JS代码var options = { type: 'line', data: { labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"], datasets: [ { label: '# of Votes', data: [12, 19, 3, 5, 2, 3], borderWidth: 1, backgroundColor: 'rgba(255, 0, 15, 0.54)' }, { label: '# of Points', data: [7, 11, 5, 8, 3, 7], borderWidth: 1 } ] }, options: { label: { fontSize: 50 }, scales: { yAxes: [{ ticks: { reverse: false } }] } }}var ctx = document.getElementById('chartJSContainer').getContext('2d');var lineChart = new Chart(ctx, options);document.getElementById('coolImage').setAttribute('src', lineChart.toBase64Image());我什至不确定我的逻辑是否正确，因为可能有更简单的方法来做到这一点。我本质上想显示图形的图像，而不是交互式折线图本身。
3 回答
守候你守候我
TA贡献1802条经验 获得超10个赞
您只需要等到图表加载完毕才能获取图像。
我可以通过快速搜索找到的唯一回调是动画 onComplete。
这是一个显示它工作的小提琴。
animation: {
onComplete: function() {
document.getElementById('coolImage').setAttribute('src', lineChart.toBase64Image());
}
}
不负相思意
TA贡献1777条经验 获得超10个赞
您的代码正在运行，但Kokodoko 是正确的，“在您尝试读取画布之前，图形可能尚未完全绘制”，因此该图像只是一个空白画布。
但是，我可以立即想到以下两种方法来设置图像，而不是手动按下按钮：
关闭动画：
options: {
animation: {
duration: 0 // general animation time
},
...
延迟阅读画布：
setTimeout(() => {
document.getElementById('coolImage').setAttribute('src', lineChart.toBase64Image());
}, 1000); // execute after 1 second.
慕村225694
TA贡献1880条经验 获得超4个赞
您可以从带有toDataURL(). 但是在您的情况下，在您尝试阅读画布之前，图形可能尚未完全绘制。
如果我将绘图代码放在一个按钮中，它会起作用：
HTML
<body>
<canvas id="chartJSContainer" width="100" height="100"></canvas>
<img src="" id="coolImage" class="img-fluid" alt="Responsive image">
<button id="create">Create image</button>
</body>
JAVASCRIPT
var canvas = document.getElementById('chartJSContainer');
var ctx = canvas.getContext('2d');
var lineChart = new Chart(ctx, options);
var button = document.getElementById("create")
button.addEventListener("click", function() {
var dataURL = canvas.toDataURL();
console.log(dataURL);
document.getElementById('coolImage').src = dataURL;
})
添加回答
举报
0/150
提交
取消