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

我有一个svg文件，它正在生成一个dataURI png，非常好用。我希望数据URI保存为图像，因此我尝试通过ajax将数据URI发送到另一台可以执行PHP的服务器。但我不能让它工作

这是生成dataURI的代码（有效）

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

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

生成png的PHP代码

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

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

手动插入数据URI时，PNG生成工作。但是它不能与上面的ajax函数一起工作

谢谢大家!

您可以使用，将图像作为

Blob

发送到

php

，用于在

php

读取

Blob

，请参阅

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

if（！htmlcanvaseelement.prototype.toBlob）{
Object.defineProperty（htmlcanvaseElement.prototype，“toBlob”{
值：函数（回调、类型、质量）{
var binStr=atob（this.toDataURL（type，quality）.split（“，”[1]），
len=binStr.长度，
arr=新的UINT8阵列（len）；
对于（var i=0；i可能的副本：Can you change
php
？Yes.Can change phpThank you.自从有人接管了这个项目后，我就没有尝试过。我已经把这个转发给他们了，如果我尝试的话，我会回来的！@AlbertJohansson查看更新的帖子。包括
request.setRequestHeader（“x-file-name”，“filename”）；
at
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)
});

<?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";
?>

$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...