当上传到服务器，从网络摄像头拍摄上传的图片被损坏

Question

我想上传网络摄像头拍摄的图像。我用画布显示出图像，并通过POST方法Base64编码的JSON数据发送到PHP，因此在PHP中对数据进行解码，并尝试通过file_put_contents创建的图像。但上传的图片被损坏每次。我用标题（“访问控制允许来源：*”）在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

你有没有检查data url of an image？它看起来像这样：

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

正如你所看到的编码图像的二进制内容的表示实际的base64逗号后开始。所有你需要做的是改变：

$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字符串。

您还缺少你的脚本中适当的验证：

• 验证JSON输入被正确解码
• 所得阵列中验证image键存在
• 验证base64_decode做解码串
• 验证得到的图像是有效图像（恶意用户可以嵌入在图像内例如PHP代码）

这样，您就可以确保99％的服务器将不会在未来得到折扣。