使用Ajax和PHP $ _FILES从Canvas元素发送图像

Question

我需要能够将图像和某些表单字段从客户端画布元素发送到PHP脚本，最终以$ _POST和$ _FILES结尾。当我这样发送时：

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

$ _POST和$ _FILES都重新填充，但是$ _FILES中的图像数据仍然需要像这样解码：

$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。这不是一个选项，因为我试图将图像传递给Wordpress的media_handle_upload（）函数，该函数需要指向指向可读图像的$
_FILES索引。我也无法相应地解码，保存和更改“ tmp_name”，因为它违反了安全性检查。

因此，我发现了这一点：http :
//www.webtoolkit.info/javascript-
base64.html， 并尝试在客户端进行解码：

img_split = img.split(",",2)[1];
img_decoded = Base64.decode( img_split );

但是由于某种原因，当我到达PHP时，我仍然没有得到可读的文件。所以问题是：“为什么？” 或“我在做什么错？” 或“这甚至有可能吗？” :-)

任何帮助非常感谢！

谢谢，凯恩

Answer 1

基于Nathan的出色回答，我能够对其进行定位，以便它仍通过jQuery.ajax进行。只需将其添加到ajax请求中即可：

            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对象，因此“ send”表示“ sendAsBinary”。然后jQuery做正确的事情。