canvas.toDataURL()

canvas.toDataURL() - повертає URL дані полотна.

Синтаксис:

canvas.toDataURL(type, encoderOptions);

Параметри:

canvas - елемент canvas.

type - рядок який містить тип зображення який повертається. Можливі значення: "image/png", "image/jpeg", "image/webp". По замовчуванню: "image/png". Не всі браузери підтримують усі типи.

encoderOptions - число від 0 до 1 яке вказує на якість зображення image/jpeg. Зазвичай по замовчуванню 0.92 .

Опис:

toDataURL() метод елемента canvas який повертає рядок який містить URI dani - URL адреса з префіксом data:type для вставлення невеликих файлів.

Цей метод використовується для перетворення малюнка на полотні в Data URL image/type. Сучасні браузери підтримують Data URL, тому рядок з Data URL можна присвоїти адресному рядку location.href або відкрити у новому вікні window.open() щоб браузер показав зображення.

Приклад:

Приклад присвоєння елементу img зображення з полотна canvas: var canvas = document.getElementById('canva'); var img = document.getElementById('images'); canvas.width=250; canvas.height=100; var ctx = canvas.getContext('2d'); ctx.fillStyle="#af0f11"; ctx.fillRect(5,5,240,90); ctx.fillStyle="black"; ctx.font="24pt arial"; ctx.fillText('JavaScript', 25, 35); img.src=canvas.toDataURL(); var canvas = document.getElementById('canvas'); canvas.width=5; canvas.height=5; var ctx = canvas.getContext('2d'); ctx.fillStyle="blue"; ctx.fillRect(1, 1, 4, 4); alert( canvas.toDataURL() ); Відкриваємо у новому вікні: var canvas = document.getElementById('canvas'); canvas.width=5; canvas.height=5; var ctx = canvas.getContext('2d'); ctx.fillStyle="blue"; ctx.fillRect(1, 1, 4, 4); window.open(canvas.toDataURL("image/jpeg", 0.75), "image"); var canvas = document.getElementById('canvas'); canvas.width=100; canvas.height=100; var ctx = canvas.getContext('2d'); ctx.fillStyle = 'red'; ctx.font="14px Arial"; ctx.fillText("яваскрипт.укр", 4, 25); window.location.href=canvas.toDataURL();