HTMLCanvasElement: метод toDataURL()

Базовая линия Широко доступно

Эта функция хорошо зарекомендовала себя и работает на многих устройствах и версиях браузеров. Она доступна в браузерах с июля 2015 года.

Метод HTMLCanvasElement.toDataURL() возвращает ссылку на данные, содержащую представление изображения в формате, указанном параметром type.

Можно указать желаемый формат файла и качество изображения. Если формат файла не указан или указанный формат не поддерживается, данные будут экспортированы как image/png. Другими словами, если возвращаемое значение начинается с data:image/png для любого другого запрошенного type, то этот формат не поддерживается.

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

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

Предупреждение: toDataURL() кодирует всё изображение в строке в памяти. Для больших изображений это может повлиять на производительность и даже привести к переполнению лимита длины URL браузеров, когда присваивается элементу HTMLImageElement.src. Вместо этого рекомендуется использовать toBlob() в сочетании с URL.createObjectURL().

Синтаксис

toDataURL()
toDataURL(type)
toDataURL(type, quality)

Параметры

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

Возвращаемое значение

Строка, содержащая запрашиваемую ссылку на данные.

Если высота или ширина холста равны 0 или больше максимального размера холста, возвращается строка "data:,".

Исключения

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

Примеры

Учитывая этот элемент <canvas>:

<canvas id="canvas" width="5" height="5"></canvas>

Можно получить ссылку на данные холста с помощью следующих строк:

const canvas = document.getElementById("canvas");
const dataURL = canvas.toDataURL();
console.log(dataURL);
// "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNby
// blAAAADElEQVQImWNgoBMAAABpAAFEI8ARAAAAAElFTkSuQmCC"

Установка качества изображения с использованием JPEG

const fullQuality = canvas.toDataURL("image/jpeg", 1.0);
// data:image/jpeg;base64,/9j/4AAQSkZJRgABAQ…9oADAMBAAIRAxEAPwD/AD/6AP/Z"
const mediumQuality = canvas.toDataURL("image/jpeg", 0.5);
const lowQuality = canvas.toDataURL("image/jpeg", 0.1);

Пример: динамическое изменение изображений

Этот метод можно использовать в сочетании с событиями мыши для динамического изменения изображений (серого/цветного):

HTML

<img class="grayscale" src="myPicture.png" alt="Description of my picture" />

JavaScript

window.addEventListener("load", removeColors);

function showColorImg() {
  this.style.display = "none";
  this.nextSibling.style.display = "inline";
}

function showGrayImg() {
  this.previousSibling.style.display = "inline";
  this.style.display = "none";
}

function removeColors() {
  const images = document.getElementsByClassName("grayscale");
  const canvas = document.createElement("canvas");
  const ctx = canvas.getContext("2d");

  for (const colorImg of images) {
    const width = colorImg.offsetWidth;
    const height = colorImg.offsetHeight;
    canvas.width = width;
    canvas.height = height;
    ctx.drawImage(colorImg, 0, 0);
    const imgData = ctx.getImageData(0, 0, width, height);
    const pix = imgData.data;
    const pixLen = pix.length;
    for (let pixel = 0; pixel < pixLen; pixel += 4) {
      pix[pixel + 2] =
        pix[pixel + 1] =
        pix[pixel] =
          (pix[pixel] + pix[pixel + 1] + pix[pixel + 2]) / 3;
    }
    ctx.putImageData(imgData, 0, 0);
    const grayImg = new Image();
    grayImg.src = canvas.toDataURL();
    grayImg.onmouseover = showColorImg;
    colorImg.onmouseout = showGrayImg;
    ctx.clearRect(0, 0, width, height);
    colorImg.style.display = "none";
    colorImg.parentNode.insertBefore(grayImg, colorImg);
  }
}

Спецификации

Спецификация
HTML # dom-canvas-todataurl-dev

Совместимость с браузерами

	Рабочие столы					Мобильные
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на IOS	Samsung Internet	WebView Android
`toDataURL`	2	12	2	9	4	18	4	10.1	3	1.0	≤37
`type_parameter_jpeg`	50	79	18	37	11	50	18	37	11	5.0	50
`type_parameter_png`	50	79	18	37	11	50	18	37	11	5.0	50
`type_parameter_webp`	17	79	96	15	Нет	18	96	14	Нет	1.5	≤37

См. также

Ссылки на данные в справке по HTTP.

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toDataURL