Ich versuche, ein ziemlich einfaches HTML zum Segeltuch und dann zum png zu exportieren. Dazu benutze ich rasterizeHTML (http://cburgmer.github.io/rasterizeHTML.js/). Das Problem, dem ich gegenüberstehe, ist, dass ich eine Warnung erhalte, als ob ich ein externes Bild / eine externe Ressource geladen hätte, dies jedoch nicht. Das habe ich versucht:

HTML:

<canvas height="500" width="500" id="rasterizer"></canvas>

Javascript

var canvas=document.getElementById("rasterizer");
rasterizeHTML.drawHTML('<div width="300px" height="300px" > <div style="width: 200px;height: 200px;position: absolute;top: 50%;left: 50%;margin: -100px 0 0 -100px;"><div style="width: 100%;height: 100%;border-radius: 50%;position: absolute;top: 0;left: 0;margin: 0;z-index: 1;background: #e4f1ea; ">            </div>            <div style="border-radius: 50%;position: absolute;top: 50%;left: 50%;z-index: 3;background: #b6cfe1;width:73.997475122531%; height:73.997475122531%; margin:-36.998737561265% 0 0 -36.998737561265%"></div>        </div></div>',canvas);
canvas.toDataURL("image/png");

Der HTML-Code gibt nur 2 Kreise übereinander wieder. Rasterizer kann dies problemlos im Canvas-Bereich anzeigen. Wenn ich dann versuche, .toDataURL auszuführen, tritt eines der folgenden Probleme auf:

Ein leeres Bild (wenn ich den Code zum ersten Mal ausführe) in der gleichen Größe wie die Leinwand.SecurityError: Fehler beim Ausführen von 'toDataURL' für 'HTMLCanvasElement': Beschmutzte Canvases können möglicherweise nicht exportiert werden.

Ich bin aus Ideen heraus, da dieses mit externen Betriebsmitteln, nicht mit völlig Inline-d HTML geschehen sollte. Weiß jemand, warum das passieren könnte? Vielen Dank.