Canvas.toDataURL()

Canvas.toDataURL() - повертає Data 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();