Question

我正在尝试上传从网络摄像头拍摄的图像。我使用画布来显示该图像，并通过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％地确定服务器将来不会受到威胁。

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

1 个答案: