установить цвет фона для сохранения диаграммы холста

Question

Я использую ChartJS и сохраняю их локально, преобразуя изображение диаграммы на холсте в большой двоичный объект, а затем сохраняю его. Но у меня возникают проблемы с установкой цвета фона для сохраняемой диаграммы холста, я могу только сохранить диаграмму без цвета фона, что сбивает с толку пользователя.

То, что я до сих пор пробовал, было:

1. Изменить тип изображения / png на изображение / jpg
2. Создайте документ со стилем и добавьте его как ребенка в мой document.createElement, который будет иметь изображение
3. придать стиль моей 'ссылке', равной document.createElement выше

Но безуспешно, изображение загружается без фона.

Я искал и нашел тему:

создать холст с фоновым изображением и сохранить

сохранить холст с фоновым изображением

но в конце всей работы не смог найти решение для меня.

Мой график на html:

<canvas id="divName"></canvas>

функция машинописного текста для сохранения изображения, создания нового большого двоичного объекта с байтовой решеткой и типа изображения: (этот код имеет все попытки добавить цвет фона)

saveimg(divName){
      let canvas:any;

        let style = document.createElement('style');
        style.type = 'text/css';
        style.innerHTML = '.cssClass { background-color: "aquamarine"; }';

        if(this.deviceValue != null) {
          canvas = document.getElementById(this.deviceValue);
      }
      else {
          canvas = document.getElementById(divName);
      }

//SOLUTION that works BY Caleb Miller ***********
fillCanvasBackground(canvas, 'white');

function fillCanvasBackground(canvasc, color)
{
   const context = canvasc.getContext('2d');
   context.save();
   context.globalCompositeOperation = 'destination-over';
   context.fillStyle = color;
   context.fillRect(0, 0, canvasc.width, canvasc.height);
   context.restore();
}
// end***********************

        let dataURL = canvas.toDataURL();
        let datablob = dataURL.substring(dataURL.indexOf(",") + 1);

     let byteCharacters = atob(datablob);
     let byteNumbers = new Array(byteCharacters.length);
     for (let i = 0; i < byteCharacters.length; i++) {
         byteNumbers[i] = byteCharacters.charCodeAt(i);
     }

     let byteArray = new Uint8Array(byteNumbers);
     let blob = new Blob([byteArray], {"type": "image/jpg"});


     if(navigator.msSaveBlob){
         let filename = this.chartTitle + ' - ' + this.entityName;
         navigator.msSaveBlob(blob, filename);
     } else {
         let filename =this.chartTitle + ' - ' + this.entityName;
         let link = document.createElement("a");

         link.onload = function() {
             canvas.drawImage(0,0);
         };

         document.getElementsByTagName('a')[0].appendChild(style);
         link.href = URL.createObjectURL(blob);
         link.setAttribute('visibility','hidden');
         link.download = filename;
         link.style.backgroundColor = "lightblue repeat-x center";

         document.body.appendChild(link).style.background = "lightblue repeat-x center";
         link.click();
         document.body.removeChild(link);
     }
        this.deviceValue = null;
    }

Изображения для выражения проблемы:

на сайте изображение:

когда я загружаю его

возможно ли добавить цвет фона к изображению на холсте?

Answer 1

Как вы обнаружили, canvas.toDataURL() не захватывает визуальные стили, применяемые с помощью CSS. Он только захватывает необработанные данные пикселей из растрового изображения, поддерживающего экземпляр canvas. Это по замыслу.

Чтобы использовать собственный цвет фона, вам нужно нарисовать его прямо на холсте. Вот пример функции, которая заполняет фон данного холста заданным цветом. Мои встроенные комментарии должны объяснить, как это работает.

function fillCanvasBackgroundWithColor(canvas, color) {
  // Get the 2D drawing context from the provided canvas.
  const context = canvas.getContext('2d');

  // We're going to modify the context state, so it's
  // good practice to save the current state first.
  context.save();

  // Normally when you draw on a canvas, the new drawing
  // covers up any previous drawing it overlaps. This is
  // because the default `globalCompositeOperation` is
  // 'source-over'. By changing this to 'destination-over',
  // our new drawing goes behind the existing drawing. This
  // is desirable so we can fill the background, while leaving
  // the chart and any other existing drawing intact.
  // Learn more about `globalCompositeOperation` here:
  // https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/globalCompositeOperation
  context.globalCompositeOperation = 'destination-over';

  // Fill in the background. We do this by drawing a rectangle
  // filling the entire canvas, using the provided color.
  context.fillStyle = color;
  context.fillRect(0, 0, canvas.width, canvas.height);

  // Restore the original context state from `context.save()`
  context.restore();
}

Чтобы использовать функцию, вызовите ее перед сохранением кода, присвоив ей холст диаграммы и цвет. Это должно выглядеть примерно так:

const canvas = document.getElementById('yourCanvasId');
fillCanvasBackgroundWithColor(canvas, 'aquamarine');
// ...the rest of your save code

Сохраненное изображение должно иметь цвет фона.