Javascript Post Base64 шифровать и дешифровать изображение

Question

Я работаю с постом с изображением javascript в base64.Когда изображение публикуется, оно показывает неверное изображение все время.Как это решить?

Я не могу понять, в чем проблема.

function encodeImageFileAsURL(element) {
  var file = element.files[0];
  var reader = new FileReader();
  reader.onloadend = function() {

			var xxhttp = new XMLHttpRequest();
            xxhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
               
							document.getElementById('output').src = "data:image/png;base64,//" + this.responseText + "";


                        
                                                        
                            }
                     };
                      xxhttp.open("POST", "itemimages.php", true);
                      xxhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
                      xxhttp.send('image_data=' + reader.result);
        
  }
  reader.readAsDataURL(file);
}

<input type="file" accept="image/png" onchange="encodeImageFileAsURL(this)" />
<img id="output" src="" alt="" />

Мой php-код в файле "itemimages.php"

$imagedata = $_POST['image_data'];

    $imagepath = "images/aa.png";

    $imagedata = preg_replace( '/data:image\/.*;base64,/', '', $imagedata );
     if(file_put_contents($imagepath,base64_decode($imagedata)))
     {
        echo "$imagedata"; 
     }

Содержит зашифрованную строку, но строка не показывает изображение

Answer 1

Если ваши данные поступают правильно в php ... попробуйте это

$imagedata = $_POST['image_data'];

$image_parts = explode(";base64,", $imagedata);
$image_type_aux = explode("image/", $image_parts[0]);
$image_base64 = base64_decode($image_parts[1]);

$imagepath = "images/aa." . $image_type_aux[1];

file_put_contents($imagepath , $image_base64);

--- javascript ---

function encodeImageFileAsURL(element) {
  var file = element.files[0];
  var reader = new FileReader();
  reader.onloadend = function() {
    console.log(reader.result)
  }
  reader.readAsDataURL(file);
}

- html -

<input type="file" onchange="encodeImageFileAsURL(this)">