Base64 изображение отправить через Ajax encodeURIComponent

Question

Я пытаюсь отправить base64 преобразованное изображение через ajax на 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);