我有一个可生成dataURI-png的svg文件，并且效果很好。而且我希望将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服务器的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);
手动插入dataURI时，可以生成PNG。但这不适用于上面的ajax函数。
谢谢！
参考方案
您可以使用canvas.toBlob()，将图像作为php发送到Blob，使用php://input在Blob读取php，请参见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";
?>
我知道有各种各样的线程要求几乎相同的要求，但似乎没有一个真正满足我的需求。在我的网站上，我实现了搜索表单。一个简单的表单，其中包含一个名为searchQuery的输入字段和一个提交按钮。表单通过POST方法发送。我正在使用Laravel btw。。然后将搜索结果从控制器加载到视图中。这些在表中显示。现在来了有趣的部分：找到的元素是可单击的，并且您进入有关该元…
Javascript-从当前网址中删除查询字符串 - javascript单击提交按钮后，我需要从网址中删除查询字符串值。我可以用jQuery做到这一点吗？当前网址：siteUrl/page.php?key=value 页面提交后：siteUrl/page.php 实际上，我已经从另一个带有查询字符串的页面着陆到当前页面。我需要在页面首次加载时查询字符串值以预填充一些详细信息。但是，一旦我提交了表格，我就需要删除查询字符串值。我已…
使用JS和PHP更改弹出窗口背景图像 - javascript我有一个JS函数：function zoom(now) { document.getElementById("popup").style.display = "block"; document.getElementById("photos").style.backgroundImage = …
执行onclick时获得意外令牌 - javascript我正在使用onclick事件从PHP调用JS函数。这是我的代码：我在一个函数中，因此我需要通过PHP来完成它，因为然后我会返回：$html = '<input type="checkbox" checked value="1" id="setGetSku" name="se…
带有变量和javascript提交的php发布表格 - javascript我有一个数据库中的项目列表，我正在尝试使用javascript提交表单，将其发布到该列表中的特定条目。我不知道为什么它不起作用。这是我的代码...<?php ... while loop to get results { echo "<form action='scheduled.php?id=$row[id]' m…