Возьмите изображение диаграммы. js с холста и отобразите его как изображение. - PullRequest
Новая
       11

Возьмите изображение диаграммы. js с холста и отобразите его как изображение.

2 голосов
/ 22 марта 2020

Отображение 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());

Я даже не уверен, что я логи c правильно, потому что может быть более простой способ сделать это. По сути, я хочу отобразить изображение графика, а не сам интерактивный линейный график.

Ответы [ 3 ]

2 голосов
/ 22 марта 2020

Вам просто нужно подождать, пока диаграмма загрузится, прежде чем вы получите изображение.

Единственным обратным вызовом, который я смог найти при быстром поиске, была анимация onComplete.

Вот скрипка показывает, что он работает. 

animation: {
  onComplete: function() {
    document.getElementById('coolImage').setAttribute('src', lineChart.toBase64Image());
  }
}
2 голосов
/ 22 марта 2020

Вы можете получить base64 из холста с помощью toDataURL(). Но в вашем случае график c, вероятно, был нарисован не полностью, прежде чем вы попытаетесь прочитать холст.

Это работает, если я вставлю код рисования в кнопку:

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

JSFIDDLE

1 голос
/ 22 марта 2020

Ваш код работает, но Кокодоко верен , что "графика c, вероятно, не была нарисована полностью, прежде чем вы пытаетесь прочитать холст", поэтому изображение просто пустое полотно .

Однако есть два способа, которыми я могу сразу подумать, чтобы установить изображение вместо ручного нажатия кнопки:

  1. Отключить анимацию: 

    options: {
  animation: {
    duration: 0 // general animation time
  },
  ...

  2. Задержка чтения холста: 

    setTimeout(() => {
  document.getElementById('coolImage').setAttribute('src', lineChart.toBase64Image());
}, 1000); // execute after 1 second.
...