HTMLCanvasElement: метод toBlob()

Метод HTMLCanvasElement.toBlob() создаёт объект Blob, представляющий изображение, содержащееся в холсте. Этот файл может быть кэширован на диске или сохранён в памяти по усмотрению пользователя агента.

Можно указать желаемый формат файла и качество изображения. Если формат файла не указан или заданный формат не поддерживается, данные будут экспортированы как image/png. Браузеры обязаны поддерживать image/png; многие будут поддерживать дополнительные форматы, включая image/jpeg и image/webp.

Созданное изображение будет иметь разрешение 96 dpi для форматов файлов, которые поддерживают метаданные разрешения кодирования.

callback

Функция обратного вызова с полученным объектом Blob в качестве единственного аргумента. null может быть передана, если изображение не может быть создано по какой-либо причине.

type Необязательно

Строка, указывающая формат изображения. По умолчанию тип image/png; этот тип также используется, если указанный тип не поддерживается.

quality Необязательно

Number от 0 до 1, указывающий качество изображения, используемое при создании изображений с использованием форматов файлов, поддерживающих сжатие с потерями (например, image/jpeg или image/webp). Пользовательский агент использует значение по умолчанию, если этот параметр не указан или число находится вне допустимого диапазона.

Ничего (undefined).

SecurityError

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

После отрисовки содержимого в холст, его можно преобразовать в файл любого поддерживаемого формата изображения. Например, фрагмент кода ниже берёт изображение в элементе <canvas> с идентификатором «canvas», получает его копию в формате PNG, а затем добавляет новый элемент <img> в документ, чьим источником изображения является созданный с помощью холста.

const canvas = document.getElementById("canvas");

canvas.toBlob((blob) => {
  const newImg = document.createElement("img");
  const url = URL.createObjectURL(blob);

  newImg.onload = () => {
    // no longer need to read the blob so it's revoked
    URL.revokeObjectURL(url);
  };

  newImg.src = url;
  document.body.appendChild(newImg);
});

Обратите внимание, что здесь мы создаём изображение PNG; если вы добавите второй параметр к вызову toBlob(), вы сможете указать другой тип изображения, поддерживаемый пользовательским агентом. Например, чтобы получить изображение в формате JPEG:

canvas.toBlob(
  (blob) => {
    /* … */
  },
  "image/jpeg",
  0.95,
); // JPEG at 95% quality

Это использует -moz-parse для преобразования холста в ico и, следовательно, работает только в Firefox. Windows XP не поддерживает преобразование из PNG в ico, поэтому используется bmp вместо этого. Ссылка для скачивания создаётся установкой атрибута download. Значение атрибута download — имя, которое будет использоваться в качестве имени файла.

const canvas = document.getElementById("canvas");
const d = canvas.width;
const ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.moveTo(d / 2, 0);
ctx.lineTo(d, d);
ctx.lineTo(0, d);
ctx.closePath();
ctx.fillStyle = "yellow";
ctx.fill();

function blobCallback(iconName) {
  return (b) => {
    const a = document.createElement("a");
    a.textContent = "Download";
    document.body.appendChild(a);
    a.style.display = "block";
    a.download = `${iconName}.ico`;
    a.href = window.URL.createObjectURL(b);
  };
}
canvas.toBlob(
  blobCallback("passThisString"),
  "image/vnd.microsoft.icon",
  "-moz-parse-options:format=bmp;bpp=32",
);

• Blob