使用来自通过ajax发送的dataURI的php生成png文件

我有一个生成dataURI-png的s​​vg文件，效果很好。 我希望将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"); }; 

这是将它发送到外部php-server的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); 

PNG生成在手动插入dataURI时有效。 但它不适用于上面的ajax函数。

谢谢！

Answer 1

您可以使用canvas.toBlob() ，将图像作为Blob发送到php ，使用php://input在php上读取Blob ，请参阅Beyond $ _POST，$ _GET和$ _FILE：在JavaScript和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 

readBlobInput.php

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