Generiere PNG-Datei mit PHP von DataURI geschickt über AJAX

Question

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

Dies ist der Code die dataURI zum Erzeugen (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 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 das 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-Generation Werke zu erzeugen, wenn manualy die dataURI einsetzen. Aber es funktioniert nicht mit der obigen Ajax-Funktion.

Vielen Dank!

Answer 1

Sie können canvas.toBlob() verwenden, senden Bild php als Blob verwenden php://inputBlob bei php zu lesen, sehen Beyond $_POST, $_GET and $_FILE: Working with Blob in JavaScript and PHP

Javascript

if (!HTMLCanvasElement.prototype.toBlob) { 
Object.defineProperty(HTMLCanvasElement.prototype, "toBlob", { 
    value: function (callback, type, quality) { 

    var binStr = atob(this.toDataURL(type, quality).split(",")[1]), 
     len = binStr.length, 
     arr = new Uint8Array(len); 

    for (var i=0; i<len; i++) { 
    arr[i] = binStr.charCodeAt(i); 
    } 

    callback(new Blob([arr], {type: type || "image/png"})); 
    } 
}); 
} 

can.toBlob(function(blob) { 
    var request = new XMLHttpRequest(); 
    // to receive `echo`ed file from `php` as `Blob` 
    // request.responseType = "blob"; 
    request.open("POST", "readBlobInput.php", true); 
    request.setRequestHeader("x-file-name", "filename"); 
    request.onload = function() { 
    // `this.response` : `Blob` `echo`ed from `php` 
    // console.log(this.response) 
    console.log(this.responseText); 
    } 
    request.send(blob) 
}); 

readBlobInput.php

<?php 
// the Blob will be in the input stream, so we use php://input 
$input = file_get_contents("php://input"); 
// choose a filename, use request header 
$tmpFilename = $_SERVER["HTTP_X_FILE_NAME"]; 
// http://stackoverflow.com/q/541430/ 
$folder = __DIR__ . "/tmp-png"; 
// http://stackoverflow.com/q/17213403/ 
is_dir($folder) || @mkdir($folder) || die("Can't Create folder"); 
// put contents of file in folder 
file_put_contents($folder . "/" . $tmpFilename, $input); 
// get MIME type of file 
$mime = mime_content_type($folder . "/" . $tmpFilename); 
$type = explode("/", $mime); 
// set MIME type at file 
$filename = $tmpFilename . "." . $type[1]; 
// rename file including MIME type 
rename($folder . "/" . $tmpFilename, $folder . "/" . $filename); 
// to echo file 
// header("Content-Type: " . $type); 
// echo file_get_contents($newName); 
echo $filename . " created"; 
?> 

Answer 2

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

list($meta, $content) = explode(',', $dataUrl); 

$content = str_replace(".", "", $content); // some android browsers will return a data64 that may not be accurate without this without this. 

$content = base64_decode($content); 
$image = imagecreatefromstring($content); 

imagepng($image, './tmp-png/'.$id.'.png', 90); // Third parameter is optional. Just placed it incase you want to save storage space...