Как я могу декодировать строку base64 в изображение и сохранить ее на моем сервере с помощью PHP

Question

У меня есть строка base64 изображения, которую я получаю с помощью Javascript и затем отправляю в сценарий PHP.

Это работает, я также могу отобразить строку в моем сценарии, но теперь я пытаюсь создатьизображение из него и сохранить его на моем сервере.Однако я не получаю ошибок, но также ничего не сохраняется ..

Что я делаю не так?

Вот как я создаю строку:

window.onload = function() {
    var fileInput = document.getElementById('fileInput');
    var fileDisplayArea = document.getElementById('fileDisplayArea');

    fileInput.addEventListener('change', function(e) {
        var file = fileInput.files[0];
        var imageType = /image.*/;

        if (file.type.match(imageType)) {
            var reader = new FileReader();

            reader.onload = function(e) {
                fileDisplayArea.innerHTML = "";

                var img = new Image();
                img.src = reader.result;

                fileDisplayArea.appendChild(img);
            }

            reader.readAsDataURL(file);
        } else {
            fileDisplayArea.innerHTML = "File not supported!"
        }
    });
}

Строка base64затем добавляется к <img src, который я получаю и отправляю с помощью ajax:

// Add/edit companies script
$( "#companywrap" ).on("click", "#savecompany", function( event ) {
  // Stop normal form behaviour
  event.preventDefault();
  var $form = $("#companyform"),
  $logo = $form.find( "#fileDisplayArea" ).children('img').attr('src');
  url = $form.attr( "action" );

  var posting = $.post( url, {
    logo: $logo,
  });
  // Show result in a div
  posting.done(function( data ) {
    $( ".resultmessage" ).empty().slideDown('fast').append( data );
    console.log($logo);
  });
});

Затем в своем скрипте PHP я делаю следующее:

$logo = $_POST['logo'];

$imageData = base64_decode($logo);
$source = imagecreatefromstring($imageData);
$angle = 90;
$rotate = imagerotate($source, $angle, 0);
$imageName = "myfolder/testfile.png";
$imageSave = imagejpeg($rotate,$imageName,100);
imagedestroy($source);

Но это несделайте что-нибудь.

Это строка, которую я получаю, когда я повторяю $logo (я не буду публиковать всю статью, потому что она слишком длинная):

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAaAAAAGcCAYAAACfjnSPAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAgY0hSTQAAeiUAAICDAAD5/wAAgOkAAHUwAADqYAAAOpgAABdvkl/FRgAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEwAACxMBAJqcGAAAgABJREFUeNrs/QV4XFt65Y07Mx/MJP+Zb2YCnXR3unO7L/qamZmZmWVbFoPFzMwlKJVYKjEzmEmyJVtmZmZm+941//XuU/K96UkynXTSSXrk51ne55w6ReeU3t9ee7977x7v3r3r8W9BL1++6vHxw3c9Xr163ePhg8c9rl+92ePqtRs97t9/2OP+vQc9AKjzPn782OP1m7c9Xr141ePtm3c9nj553uP585c9nj97oZ4n58nryHlSvnz5usezZ897vOFzRC/4vCfyHB579fpNj5fcf/7spXqNZyJuv3jOY0ov1WNPnrzo8fjxc/XaP9aHD9/3+Pjdx0/733333Se9e/eR+k7p7Vv5fm/V5//w4aPS+3cfuC96/yPxWrzV9Pb1ux6v+BxNr/k5X/d48/qt0uvXcoyfXfRCe0w+80tKvp9IPv9TSr67XKPf/Ox/aPqO9/rDhw//y3342/pe04eP/6T3kNcXfTRJ7uNH0ccPJvHeyu9O6bt/4HP8pj7+9ud+r32H3+ozf2+SXJPvv//Rse8/vV7X/jt+HzlHfofynbqe16W7d27zd/bC9N1+0O/r/v7P//k/u/UHqB7dAOoGUDeAugHUDaBudQPo/2AAvX//gWL5TlM3gLoB1A2gbgB1A6gbQP9sABLAdAHow3tCSOnDj9QNoG4AdQOoG0DdAOoG0O8IoPfvv/s3A6BnT190A6gbQN0A6lY3gLoB1A2gbgB1A6gbQN3qBlA3gLoB1A2gbgB1qxtAv08APWVA7gZQN4C6AdQNoG51A6gbQH8PgF6/6tKbbgB1A6gbQN3qBtC/ZQA9evjk/xgAvX7Fa0D9IwD0n/+QRQD9Z8Lhf3D7Z7z+f4++F/2EAPqnvMcfdQPonwVAf9QNoG51A+ifBqA//rEIoD8mgP6S231F/IP+JAKoL+HTT0QA9SOA+hEwyxm0LJTef7R4r/ThR3pvQfgoEUAWhI9JbywIGQ/Cp1T0WvTqbSkBVMrjSvzMpQRQKb+fEj9/KQFUyu9eSgA1sLyt6cVt7t9+yu3nTykp5VjXY89eftJzVb74dPz589d/6zFen9t8X5Z8XLZfvrr94sXr27yX1Ovbr6lXqnx1+/XrN7ffdOnNb6O3Jr25/fatVr55azrGktf09jtuK73WSp7zmI+/ZflJb/ljefuK26/5KqI3b1/I6/Ea/696L+W72+/52h+4/eH9Bx77oEqC5yhVKvpoEu8jS+rjB5M+lhJAqiSASvk7EMVRW/5hfZTS/O+QGTWQ6vNJ33/P8vve/L39178Dkt0OqFvdAPpdAMRA9bsC6P/h6/wxz/ucZV8Gwr4Mrv0Zi6ZTMxmcZxJAMxl4FxBAWwigLQymHnyNUgbRMAbXLQyqBRLA5RgfKyWASgmgbY8fP7v98NHT2w8fPrnNz3j7/v3Ht+/de/Ti7p0HuHP7AW7dvINbN27j9o27LO+o8ubNu7hxXY5LeRvXr99keQvXr1Gyf/UWrl27iWtXTfu/oa7j165q2126fo371+T5t7Xtq6b9rufxPTTJvrYt5Q1+vhv8bPJZbt64oz6nKm/xM99ieZvl7Xu4eesebt/WdOv2fdy+cx93qLt3RQ9w757oIR48eIQHD0169BiPRI+fsHyKx9STp8/w9OlTPHv2DM+fP/+kFy9eKL3s0suX

Answer 1

Чтобы получить конкретный base 64 контент для изображения, удалите data:image/png;base64, и замените пробелы +, как показано в коде ниже:

$imageData = base64_decode(str_replace(['data:image/png;base64,', ' '], ['', '+'], $logo));

Answer 2

Чтобы получить действительную строку в кодировке base64, вы должны удалить префикс из строки. В этом случае строки base64 начинаются после data:image/png;base64,.

Простое решение - просто пропустите первые 22 символа.

$logo = substr($logo, 22);

Если вам нужно более общее решение - используйте регулярное выражение, подобное этому

$logo = preg_replace('~^data:[^;]+;base64,~', '', $logo);