Загруженное изображение с веб-камеры повреждено при загрузке на сервер

Question

Я пытаюсь загрузить изображение, снятое с веб-камеры.Я использую canvas для показа этого изображения и отправляю данные base64_encoded json методом POST в PHP, поэтому в PHP декодирую данные и пытаюсь создать изображение с помощью file_put_contents.Но загруженное изображение повреждено каждый раз.Я использовал заголовок («Access-Control-Allow-Origin: *») также в PHP.Я также проверил, что file_get_contents включен на сервере.В чем может быть ошибка?Пожалуйста, помогите.

Мой код:

 JS:

// Trigger photo take

var imagedata;
document.getElementById('snap').addEventListener('click', function() {
   $('#canvas').show();
   context.drawImage(video, 0, 0, 640, 480);
   $('#upload-button').removeAttr("disabled");
   var image = new Image();
   image.src = canvas.toDataURL();
   imagedata = image.src;
   $('#webimage').val(imagedata);
}); 

PHP:
header("Access-Control-Allow-Origin: *");
$input_data = json_decode(trim(file_get_contents('php://input')), true);
$base = $input_data['image'];
$destination_directory = "uploads/";
$file_name  =   time();
$file_name = $file_name.'.png';
$targetPath = $destination_directory . $file_name;
$input_data = base64_decode($base);
file_put_contents($targetPath, $input_data);

Answer 1

Вы когда-нибудь проверяли URL-адрес изображения ?Выглядит это так:

image/gif;base64,R0lGODlhyAAiALM...DfD0QAADs=

Как видите, фактическое представление в двоичном формате двоичного содержимого изображения начинается после запятой.Все, что вам нужно сделать, это изменить:

$base = $input_data['image'];

на:

// php >= 5.4
$base = explode(',', $input_data['image'])[1];

// php < 5.4
list (, $base) = explode(',', $input_data['image']);

, поэтому функция base64_decode получает правильную строку base64.

Youтакже отсутствует правильная проверка в вашем скрипте:

• проверить правильность декодирования входных данных JSON
• проверить image ключ существует в результирующем массиве
• проверить base64_decodeдействительно декодировал строку
• проверка правильности полученного изображения (злоумышленники могут встроить PHP-код, например, в изображение)

Таким образом, вы можете быть на 99% уверены, что ваш сервер выигралне скомпрометированы в будущем.