Невозможно конвертировать Canvas с диаграммой и изображениями, используя toDataURL ()

Question

У меня есть гистограмма (с использованием chart.js) с метками в качестве изображений, и когда я пытаюсь экспортировать холст в изображение, он экспортирует только часть диаграммы, а не изображения (метки), но тот же холст, когда я щелкаю правой кнопкой мыши и Сохранить как изображение можно правильно экспортировать (как диаграммы, так и изображения меток).

Может кто-нибудь помочь мне с этим вопросом.

мой файл js:

var config = {
    type: 'horizontalBar',
  data: {
    labels:['a', 'b', 'c', 'd', 'e', 'f'],
    datasets: [
      {
        data: [ "20", "10", "2", "5", "1", "22" ],
        backgroundColor: [ '#f1f33a', '#99d695', "#cc8e50", '#ec9089', '#8e7bd4', '#eef5ce' ]   
      }]
  },
  options: {
    animation: {
      duration: 1,
      onComplete: function(charttt) {
        var chartInstance = charttt.chart,
        ctx = chartInstance.ctx;

        ctx.textAlign = 'right';
        ctx.textBaseline = 'bottom';

        this.data.datasets.forEach(function (dataset) {
            var meta = chartInstance.controller.getDatasetMeta(i);
            meta.data.forEach(function (bar, index) {
                var img = new Image();
                img.src = 'https://i.imgur.com/yDYW1I7.png';
                var data = dataset.data[index];

                ctx.fillStyle = 'red';
                ctx.fillText(data, bar._model.x - 20, bar._model.y - 10);
                img.onload = function() {
                  ctx.drawImage(img, bar._model.x, bar._model.y, 10, 10);
                }
            });
        });
        var url = document.getElementById('barChart').toDataURL('image/png');
        document.getElementById("testimg").src = url;
        }
    },
    legend: {
      "display": false
    },
    responsive:false,
    chartArea: {
        backgroundColor: 'blue'
    }
  }
};

var ctx = document.getElementById("barChart").getContext("2d");
var chartt = new Chart(ctx, config);

Answer 1

Я думаю, что ты проблема здесь ...

    this.data.datasets.forEach(function (dataset) {
        var meta = chartInstance.controller.getDatasetMeta(i);

вы пытаетесь получить метаданные набора данных i
но i не определено

необходимо добавить аргумент в функцию forEach

    this.data.datasets.forEach(function (dataset, i) {  // <-- here
        var meta = chartInstance.controller.getDatasetMeta(i);

см. Следующий рабочий фрагмент ...

$(document).ready(function() {
  var config = {
      type: 'horizontalBar',
    data: {
      labels:['a', 'b', 'c', 'd', 'e', 'f'],
      datasets: [
        {
          data: [ "20", "10", "2", "5", "1", "22" ],
          backgroundColor: [ '#f1f33a', '#99d695', "#cc8e50", '#ec9089', '#8e7bd4', '#eef5ce' ]
        }]
    },
    options: {
      animation: {
        duration: 1,
        onComplete: function(charttt) {
          var chartInstance = charttt.chart,
          ctx = chartInstance.ctx;

          ctx.textAlign = 'right';
          ctx.textBaseline = 'bottom';

          this.data.datasets.forEach(function (dataset, i) {
              var meta = chartInstance.controller.getDatasetMeta(i);
              meta.data.forEach(function (bar, index) {
                  var img = new Image();
                  img.src = 'https://i.imgur.com/yDYW1I7.png';
                  var data = dataset.data[index];

                  ctx.fillStyle = 'red';
                  ctx.fillText(data, bar._model.x - 20, bar._model.y - 10);
                  img.onload = function() {
                    ctx.drawImage(img, bar._model.x, bar._model.y, 10, 10);
                  }
              });
          });
          var url = document.getElementById('barChart').toDataURL('image/png');
          document.getElementById("testimg").src = url;
          }
      },
      legend: {
        "display": false
      },
      responsive:false,
      chartArea: {
          backgroundColor: 'blue'
      }
    }
  };

  var ctx = document.getElementById("barChart").getContext("2d");
  var chartt = new Chart(ctx, config);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script>
<canvas id="barChart"></canvas>
<img id="testimg"/>

---

РЕДАКТИРОВАТЬ

есть две проблемы, из-за которых изображения не отображаются в экспорте.

сначала добавление изображений из другого домена портит холст.
после этого ошибка безопасности не позволит экспортировать холст.
Обходной путь - добавить атрибут crossorigin к изображению, добавляемому в диаграмму.

img.setAttribute('crossorigin', 'anonymous');

далее, перед экспортом диаграммы,
нам нужно дождаться загрузки всех изображений,
в событии img.onload.

см. Следующий рабочий фрагмент ...

$(document).ready(function() {
  var config = {
      type: 'horizontalBar',
    data: {
      labels:['a', 'b', 'c', 'd', 'e', 'f'],
      datasets: [
        {
          data: [ "20", "10", "2", "5", "1", "22" ],
          backgroundColor: [ '#f1f33a', '#99d695', "#cc8e50", '#ec9089', '#8e7bd4', '#eef5ce' ]
        }]
    },
    options: {
      animation: {
        duration: 1,
        onComplete: function(charttt) {
          var chartInstance = charttt.chart,
          ctx = chartInstance.ctx;

          ctx.textAlign = 'right';
          ctx.textBaseline = 'bottom';

          var countDatasets = this.data.datasets.length;
          this.data.datasets.forEach(function (dataset, i) {
              var meta = chartInstance.controller.getDatasetMeta(i);
              var countMeta = meta.data.length;
              meta.data.forEach(function (bar, index) {
                  var img = new Image();
                  img.setAttribute('crossorigin', 'anonymous');
                  img.src = 'https://i.imgur.com/yDYW1I7.png';
                  var data = dataset.data[index];

                  ctx.fillStyle = 'red';
                  ctx.fillText(data, bar._model.x - 20, bar._model.y - 10);
                  img.onload = function() {
                    ctx.drawImage(img, bar._model.x, bar._model.y, 10, 10);
                    countMeta--;
                    if (countMeta === 0) {
                      countDatasets--;
                    }
                    if ((countDatasets === 0) && (countMeta === 0)) {
                      var url = document.getElementById('barChart').toDataURL('image/png');
                      document.getElementById("testimg").src = url;
                    }
                  }
              });
          });
        }
      },
      legend: {
        "display": false
      },
      responsive:false,
      chartArea: {
          backgroundColor: 'blue'
      }
    }
  };

  var ctx = document.getElementById("barChart").getContext("2d");
  var chartt = new Chart(ctx, config);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script>
<canvas id="barChart"></canvas>
<img id="testimg"/>