使用Ajax和PHP $ _FILES画布元素发送图片 [英] Sending images from Canvas elements using Ajax and PHP $_FILES
问题描述
我需要能够发送图像和某种形式的领域从客户端的canvas元素的PHP脚本,在$ _ POST和$ _FILES结束了。当我把这样的:
I need to be able to send an image and some form fields from a client side canvas element to a PHP script, ending up in $_POST and $_FILES. When I send it like this:
<script type="text/javascript">
var img = canvas.toDataURL("image/png");
...
ajax.setRequestHeader('Content-Type', "multipart/form-data; boundary=" + boundary_str);
var request_body = boundary + '\n'
+ 'Content-Disposition: form-data; name="formfield"' + '\n'
+ '\n'
+ formfield + '\n'
+ '\n'
+ boundary + '\n'
+ 'Content-Disposition: form-data; name="async-upload"; filename="'
+ "ajax_test64_2.png" + '"' + '\n'
+ 'Content-Type: image/png' + '\n'
+ '\n'
+ img
+ '\n'
+ boundary;
ajax.send(request_body);
</script>
$ _ $中仍_FILES需要这样的解码POST和$ _FILES这两个回来居住,但图像数据:
$_POST and $_FILES both come back populated, but the image data in $_FILES still needs decoding like this:
$loc = $_FILES['async-upload']['tmp_name'];
$file = fopen($loc, 'rb');
$contents = fread($file, filesize($loc));
fclose($file);
$filteredData=substr($contents, strpos($contents, ",")+1);
$unencodedData=base64_decode($filteredData);
...为了将它保存为可读PNG。这并不像我想通过图像到Word preSS的media_handle_upload()函数,这需要一个索引$ _FILES指向一个可读的图像的选项。我也不能去code,保存和改变'tmp_name的值据此,因为它属于安全检查的犯规。
...in order to save it as a readable PNG. This isn't an option as I'm trying to pass the image to Wordpress's media_handle_upload() function, which requires an index to $_FILES pointing to a readable image. I also can't decode, save and alter 'tmp_name' accordingly, as it falls foul of security checks.
所以,我发现这一点: <一href="http://www.webtoolkit.info/javascript-base64.html">http://www.webtoolkit.info/javascript-base64.html 并试图做的客户端去code:
So, I found this: http://www.webtoolkit.info/javascript-base64.html and tried to do the decode on the client side:
img_split = img.split(",",2)[1];
img_decoded = Base64.decode( img_split );
但由于某些原因,我还是不结了一个可读的文件时,得到的PHP。 所以,问题是:为什么?或我是什么做错了吗?或者这甚至可能吗? : - )
but for some reason I still don't end up with a readable file when it gets to the PHP. So the question is: "Why?" or "What am I doing wrong?" or "Is this even possible?" :-)
任何帮助非常AP preciated!
Any help very much appreciated!
谢谢, 凯恩
推荐答案
大厦内森的出色答卷,我能够finnagle它,这样它仍然会通过jQuery.ajax。只需添加这Ajax请求:
Building on Nathan's excellent answer, I was able to finnagle it so that it is still going through jQuery.ajax. Just add this to the ajax request:
xhr: function () {
var myXHR = new XMLHttpRequest();
if (myXHR.sendAsBinary == undefined) {
myXHR.legacySend = myXHR.send;
myXHR.sendAsBinary = function (string) {
var bytes = Array.prototype.map.call(string, function (c) {
return c.charCodeAt(0) & 0xff;
});
this.legacySend(new Uint8Array(bytes).buffer);
};
}
myXHR.send = myXHR.sendAsBinary;
return myXHR;
},
基本上,你只返回被重写,使送的XHR对象的意思是sendAsBinary。然后jQuery的做正确的事情。
Basically, you just return back an xhr object that is overriden so that "send" means "sendAsBinary". Then jQuery does the right thing.
这篇关于使用Ajax和PHP $ _FILES画布元素发送图片的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!