Wie extrahiere ich einen Teil eines Bildes in eine Leinwand und verwende ihn als Hintergrundbild für ein Div?
So sieht mein Code aus:
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 + ')');
});
Ich versuche, einen Teil des Bildes auf der Leinwand aus (0,0) mit einer Höhe und einer Breite von 300px zu extrahieren und dieses imageData-Objekt in eine dataUrl zu konvertieren, um es als Hintergrund für ein div zu verwenden.
Ich erhalte eine Fehlermeldung: imageData.toDataUrl () ist keine Funktion. Wie kann ich das erreichen?
Danke im Voraus