从网络摄像头拍摄的上传图像在上传到服务器时已损坏

Question

我正在尝试上传从网络摄像头拍摄的图像。我使用 canvas 来显示该图像，并通过 POST 方法将 base64_encoded json 数据发送到 PHP，因此在 PHP 中解码数据并尝试通过 file_put_contents 创建图像。但是每次上传的图像都已损坏。我也在 PHP 中使用了 header("Access-Control-Allow-Origin: *") 。我还检查了服务器中是否启用了 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% 确定您的服务器将来不会受到威胁。

从网络摄像头拍摄的上传图像在上传到服务器时已损坏

Uploaded image taken from webcam is corrupted when uploaded to server

php

webcam