Ich habe eine SVG-Datei, die ein DataURI-PNG generiert und die hervorragend funktioniert. Und ich möchte, dass die Daten-URL als Bild gespeichert wird. Deshalb versuche ich, die Daten-URL über Ajax an einen anderen Server zu senden, der PHP ausführen kann. Aber ich kann es nicht zum Laufen bringen.

Dies ist der Code zum Generieren des dataURI (das funktioniert)

var mySVG    = document.querySelector('svg'),      // Inline SVG element
tgtImage = document.querySelector('.tgtImage');      // Where to draw the result
can      = document.createElement('canvas'), // Not shown on page
ctx      = can.getContext('2d'),
loader   = new Image;                        // Not shown on page

console.log(mySVG);

loader.width  = can.width  = tgtImage.width;
loader.height = can.height = tgtImage.height;
loader.onload = function(){
    ctx.drawImage( loader, 0, 0, loader.width, loader.height );
    tgtImage.src = can.toDataURL("image/png");
};

Dies ist der Ajax-Code, um ihn an den externen PHP-Server zu senden:

$.ajax({
    type: "POST",
    data: {id:'testID',datauri: can.toDataURL("image/png")},
    crossDomain: true,
    //dataType: "jsonp",
    url: "https://urltoscript.php",
    success: function (data) {
        console.log(data);
    },
    error: function (data) {
        console.log(data);
    }
  });

Der PHP-Code zum Generieren des PNG

$dataUrl = $_REQUEST['datauri'];
$id = $_REQUEST['id'];

list($meta, $content) = explode(',', $dataUrl);
$content = base64_decode($content);
file_put_contents('./tmp-png/'.$id.'.png', $content);

Die PNG-Generierung funktioniert beim manuellen Einfügen des dataURI. Mit der obigen Ajax-Funktion funktioniert dies jedoch nicht.

Vielen Dank