首頁猿問從畫布中獲取 chart.js...

從畫布中獲取 chart.js 的圖像并將其顯示為圖像

JavaScript

Helenr 2022-05-26 11:24:46

顯示圖表的 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());

}

反對回復 2022-05-26

不負相思意

TA貢獻1777條經驗獲得超10個贊

您的代碼正在運行，但Kokodoko 是正確的，“在您嘗試讀取畫布之前，圖形可能尚未完全繪制”，因此該圖像只是一個空白畫布。

但是，我可以立即想到以下兩種方法來設置圖像，而不是手動按下按鈕：

關閉動畫：

options: {

animation: {

duration: 0 // general animation time

...

延遲閱讀畫布：

setTimeout(() => {

document.getElementById('coolImage').setAttribute('src', lineChart.toBase64Image());

}, 1000); // execute after 1 second.

反對回復 2022-05-26

慕村225694

TA貢獻1880條經驗獲得超4個贊

您可以從帶有toDataURL(). 但是在您的情況下，在您嘗試閱讀畫布之前，圖形可能尚未完全繪制。

如果我將繪圖代碼放在一個按鈕中，它會起作用：

HTML

<body>

<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;

})

反對回復 2022-05-26

3 回答
0 關注
164 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

從畫布中獲取 chart.js 的圖像并將其顯示為圖像

從畫布中獲取 chart.js 的圖像并將其顯示為圖像

3 回答

添加回答