显示图表的base64图像。
我有一个创建的简单图表。创建完之后，我想获取它的base64图像并以html显示，但我无法做到这一点。
这里是我的FIDDLE
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());
我什至不确定我的逻辑是否正确，因为这样做可能更简单。我本质上是想显示图形的图像，而不是交互式折线图本身。
您可以使用toDataURL()从画布中获取base64。但是对于您而言，在尝试阅读画布之前，图形可能尚未完全绘制。
如果我将绘图代码放在按钮中，它将起作用：
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;
})
您的代码正在工作，但是Kokodoko is correct“在尝试阅读画布之前，可能没有完全绘制图形，因此图像只是空白画布。
但是，这是我可以立即想到的两种设置图像的方法，而不是手动按下按钮的方法：
关闭动画：
options: {
animation: {
duration: 0 // general animation time
},
...
延迟阅读画布：
setTimeout(() => {
document.getElementById('coolImage').setAttribute('src', lineChart.toBase64Image());
}, 1000); // execute after 1 second.