Строка Base64 повреждена при хранении в файловой системе

Question

Я работаю на странице профиля. Когда пользователь щелкает изображение, ему разрешается отправить файл. Я использую средство чтения файлов как таковое через javascript

          $('#profileImage').click(function(){ $('#image-file').trigger('click'); });

                $('#image-file').on('change',function(){
                    if (this.files && this.files[0]) {

                        var FR= new FileReader();

                        FR.readAsDataURL(this.files[0]);                    
                        FR.addEventListener("load", function(e) {
                          document.getElementById("profileImage").src = e.target.result;

                          imgData = e.target.result;

                          var formData = {
                            'name'              : localStorage.getItem('email'),
                            'image'             : imgData
                          };

                            console.log("image data: " + imgData);


                            $.ajax({
                                 type   : 'POST',
                                 url    : '/uploadprofile.php',
                                 data   : formData,
                                 dataType: 'text',
                                 encode : true
                            }).done(function(data) {
                                  console.log(data);
                            });


                        });
                }





            });

. Затем у меня есть php-скрипт, который обрабатывает строку изображения base64 и сохраняет ее в файловой системе.

uploadprofile.php

    if ($json == "") {
        $name = $_POST['name'];
        $image = $_POST['image'];
    } else {
        $name = $json["name"]; //within square bracket should be same as Utils.imageName & Utils.image

        $image = $json["image"];

    }


    $response = array();

   $decodedImage = base64_decode("$image");

    //unlink old picture
    // unlink($name.".jpg");
    $oldName = $name;
    $name .= date("D M d Y G:i");
    $name = str_replace(' ', '', $name);

    $fullPath = "http://www.mywebsite.com/uploads/".$name.".jpg";

    $return = file_put_contents("uploads/".$name.".jpg", $decodedImage);

    if($return !== false){
        $response['email'] = $oldName;
        $response['image'] = $image;
        $response['success'] = 1;
        $response['message'] = "Image Uploaded Successfully";
        $sql = "UPDATE Users SET PicLocation = '$fullPath' WHERE Email = '$oldName'";

        $result = $conn->query($sql);
    }else{
        $response['success'] = 0;
        $response['message'] = "Image Uploaded Failed";
    }

    echo json_encode($response);

Проблема в том, что после сохранения изображения в файловой системе я не могу просмотреть этот файл или он каким-либо образом поврежден. Использую ли я имя файла для src или напрямую пытаюсь просмотреть его с панели управления, оно не отображается. Я заметил, что размер файла строки base64 примерно в 3 раза больше размера изображения, но я не уверен, почему это так.

Что мне нужно сделать, чтобы данные base64 были преобразованы вчитаемый файл? Значение $ decodedImage равно false. Что мне делать, чтобы отправить правильный формат из моего javascript?

Значение $image в php начинается следующим образом:

data: image / png; base64, iVBORw0KGgoAAAANSUhEUgAAAZIAAAMsCAYAAAB +3STWAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAAEnQAABJ0Ad5mH3gAAP + lSURBVHhe7J0HmFRF9vbZ8P92VyXnJNm00bDqrq6r7uqKgGnXCJIEJeeMZJCcs2REEcUsiJKDBBM5oyggSlIx5 / rOr7qruX3n9jAzdM / 09JzzPO8z0 / fWrRvq3vPWCVWV7w9 / + IO59NJLzZ / + 9Cdz2223mRtuuMGUKFHS5M + f35xzzjnmrLPOMv / 3f / 9nfvnLX5p8 + fIpFLkKv / jFL81vzypgfnd2wYTh // 327MBzKxTJjF / 84hfm17 / + tfnd735ndf3ZZ59t / 7 / QH / 8yzZo1M7fccotp06aNadu2rWnYsKFp36GD6b5qbyDy / fWvfzVXX3214e + dd95pLrnkElO4cBFbsSMSTsZJgy5GoUh2 / PKXvzK / + d055rcBJHBGEIL6f785S86h34Yi9wGdjoHwm9 / 8Jkrflypd1tSr39B07NjR1KtXzzz88MOmRYsWplnzFoEkAvL985//tFbINddcY26++WZTsUJFU7BAgUjFv/3tb82vfvUrJRJFrscvf/Vr6RT9P/Pr/ztz/Erq+YUQVNB5FIrcAogEjxPWCF4o/kIst91+t+ndu7e59957Tb9+/UynTp1McyGTnj17BhPJrbfeam666Sbr1rrmH9eY0qVKm/xhEgFUqm4thUKhSD049xaWiAtn4N669LK/mZatWpkmTZpYQunTp49p3bq16dq9ezCR1K9f3/znP/8xd999t/nLXy42...

Answer 1

Чтобы получить base64 изображения, вы должны удалить префикс data:image/png;base64,. Кроме того, изображение может быть, например, png (вы также можете проверить правильность типа). Итак, у вас будет:

    $indexOfComma = strpos($image, ',');
    $imageContent = substr($image, $indexOfComma);
    $imageType = substr($image, 0, $indexOfComma);
    $imageType = str_replace(["data:image/", ";base64,"], "", $imageType); 
    $decodedImage = base64_decode("$imageContent");
    //...
    $fullPath = "http://www.mywebsite.com/uploads/" . $name . "." . $imageType;
    $return = file_put_contents($name . "." . $imageType, $decodedImage);

Answer 2

Я разобрался в блоге: https://davidwalsh.name/convert-image-data-uri-javascript

Все, что мне нужно было сделать, это удалить ненужный текст в начале строки base64.