Как захватить HTML canvas в GIF/JPG/PNG/PDF?

HTML5 предоставляет функцию Canvas.toDataURL(mimetype), которая поддерживается в браузерах Opera, Firefox и Safari 4 beta. Однако есть ряд ограничений по безопасности, в основном связанных с отрисовкой контента из другого источника на холсте.

Таким образом, вам не нужна дополнительная библиотека.

Пример кода:

<canvas id="canvas" width="200" height="200"></canvas>
<script>
    window.onload = function() {
        var canvas = document.getElementById("canvas");
        var context = canvas.getContext("2d");
        context.fillStyle = "green";
        context.fillRect(50, 50, 100, 100);
        // Без аргументов по умолчанию используется image/png; image/jpeg и т.д. также
        // могут работать в некоторых реализациях — image/png является единственным форматом, 
        // который должен поддерживаться по спецификации.
        window.location = canvas.toDataURL("image/png");
    }
</script>

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

Для экспорта содержимого элемента <canvas> в формате PNG, можно использовать следующий код на JavaScript:

function exportCanvasAsPNG(id, fileName) {
    var canvasElement = document.getElementById(id);  // Получаем элемент canvas по его id

    var MIME_TYPE = "image/png";  // Указываем MIME-тип для PNG

    var imgURL = canvasElement.toDataURL(MIME_TYPE);  // Получаем URL изображения в формате PNG

    var dlLink = document.createElement('a');  // Создаем элемент ссылки
    dlLink.download = fileName;  // Задаем имя файла для скачивания
    dlLink.href = imgURL;  // Устанавливаем URL для ссылки
    dlLink.dataset.downloadurl = [MIME_TYPE, dlLink.download, dlLink.href].join(':');  // Указываем метаданные для скачивания

    document.body.appendChild(dlLink);  // Добавляем ссылку в документ
    dlLink.click();  // Кликаем по ссылке для начала скачивания
    document.body.removeChild(dlLink);  // Удаляем ссылку из документа
}

Этот код создаёт ссылку для скачивания, используя данные из элемента canvas. Убедитесь, что вместо id передан корректный идентификатор вашего элемента <canvas>, а fileName — это желаемое имя для вашего PNG-файла. После выполнения функции изображение будет автоматически загружено на устройство пользователя.

Вы можете использовать метод toBlob для получения ArrayBuffer из элемента HTMLCanvasElement, что может быть полезно, если вам нужно избежать использования строковых представлений, таких как Data URL или Base64. Ниже представлен пример функции на TypeScript, которая выполняет эту задачу:

export function canvasToArrayBuffer(canvas: HTMLCanvasElement, mime: string): Promise<ArrayBuffer> {
  return new Promise((resolve, reject) => 
    canvas.toBlob(async (blob) => {
      if (blob) {
        const reader = new FileReader();
        reader.addEventListener('loadend', () => {
          const result = reader.result;
          if (result) {
            resolve(result as ArrayBuffer);
          } else {
            reject(new Error('Expected FileReader result'));
          }
        });
        
        reader.addEventListener('error', (e) => {
          reject(e);
        });
        
        reader.readAsArrayBuffer(blob);
      } else {
        reject(new Error('Expected toBlob() to be defined'));
      }
    }, mime)
  );
}

Еще одно преимущество использования Blob заключается в том, что вы можете создавать Object URLs для представления данных как файлов, что похоже на член 'files' элемента HTMLInputFile. Более подробную информацию можно найти в документации MDN.

Для загрузки изображения из <canvas /> в формате Blob, вы можете использовать следующий асинхронный код:

async function canvasToBlob(canvas) {
  if (canvas.toBlob) {
    return new Promise(function (resolve) {
      canvas.toBlob(resolve);
    });
  } else {
    throw new Error('canvas.toBlob недоступен');
  }
}

await canvasToBlob(вашCanvasEl);

Этот код проверяет, поддерживает ли ваш элемент canvas метод toBlob. Если да, то он создаёт новый Promise, который будет разрешён при успешном преобразовании canvas в Blob. Если метод не поддерживается, выбрасывается ошибка с сообщением 'canvas.toBlob недоступен'. Не забудьте заменить вашCanvasEl на реальный элемент canvas, который вы хотите конвертировать.

На некоторых версиях Chrome вы можете:

1. Использовать функцию рисования изображения ctx.drawImage(image1, 0, 0, w, h);
2. Щелкнуть правой кнопкой мыши по канвасу