用php从dataURI生成png文件通过ajax发送

Question

我有一个svg文件正在生成dataURI-png，而且效果很好。我希望将dataURI保存为图像，因此我尝试通过ajax将dataURI发送到可以执行PHP的另一台服务器。但我无法让它工作。

这是生成代码的dataURI（的作品）

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"); 
}; 

这是AJAX代码将其发送到外部的PHP服务器：

$.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); 
    } 
    }); 

的PHP代码生成PNG

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

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

当手动插入dataURI时，PNG生成工作。但它不适用于上面的ajax函数。

谢谢！

Answer 1

您可以使用canvas.toBlob()，发送图像php为Blob，使用php://input在php阅读Blob，看到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...