Question

我正在尝试通过ajax将base64转换后的图像发送到PHP后端。我使用encodeURIComponent来编码base64图像，我还必须使用encodeURI来编码参数。否则它继续给我403访问被拒绝错误。当我发送图像这样的图像变得腐败。当我只使用encodeURIComponent来编码图像。并且使用encodeURI发送没有编码的参数它完美地工作。（仅在本地服务器中。）

以下代码仅适用于本地服务器（wamp）

                var img = canvas.toDataURL("image/png");

                var Parameters = "image=" + encodeURIComponent(img) + "&filename=" + name;

                $.ajax({
                    type: "POST",
                    url: "savePNG.php",
                    data: Parameters,
                    success: function (response) {
                        alert(response);
                    }
                });

当我再次编码data: encodeURI(Parameters),时，它会将数据解析到后端。但是图像变得腐败（我认为因为它编码了两次。）

PHP后端代码如下所示。

$image = $_POST['image'];

$filename = $_POST['filename'];

$image = str_replace('data:image/png;base64,', '', $image);
$decoded = base64_decode($image);

file_put_contents($filename . ".png", $decoded, LOCK_EX);

echo $image;

有没有办法在服务器上工作而不会损坏图像。

Answer 1

使用以下技巧。

的JavaScript

var img = canvas.toDataURL("image/png");

var ajax = new XMLHttpRequest();
ajax.open("POST", 'savePNG.php', false);
ajax.setRequestHeader('Content-Type', 'application/upload');
ajax.send(img);

PHP代码

$imageData=$GLOBALS['HTTP_RAW_POST_DATA'];
$filteredData=substr($imageData, strpos($imageData, ",")+1);
$unencodedData=base64_decode($filteredData);
$fp = fopen("filename.png", 'wb' );
fwrite( $fp, $unencodedData);
fclose( $fp );

Base64图像通过Ajax encodeURIComponent发送

1 个答案: