¿Cómo extraigo una parte de una imagen en el lienzo y la uso como imagen de fondo para un div?
Así es como se ve mi código:
document.addEventListener('DOMContentLoaded', function () {
var canvas = document.querySelector('canvas');
var ctx = canvas.getContext("2d");
var imageData = ctx.getImageData(0, 0, 300, 300);
var tile = {
'id': 1,
'data': imageData,
'dataUrl': imageData.toDataUrl()
};
var div = document.createElement('div');
div.classList.add('tile');
grid.appendChild(div);
div.style.backgroundImage = ('url(' + tile.dataUrl + ')');
});
Estoy tratando de extraer una parte de la imagen en el lienzo, desde (0,0) con alto y ancho 300px, y convertir ese objeto imageData en un dataUrl para usarlo como fondo de un div.
Me sale un error: imageData.toDataUrl () no es una función. ¿Cómo puedo conseguir esto?
¡Gracias por adelantado!