Cześć,
Piszę aplikację, która zrobi zdjęcie a następnie to zdjęcie zapisze na serwerze. Jednak mam pewien problem z jego zapisaniem. W katalogu upload tworzy mi się plik z zdjęciem, jednak nie da się go odtworzyć, pisze, że plik jest uszkodzony, ma 0 B.
Gorąca prośba o pomoc.
Mój kod:
// Set constraints for the video stream
var constraints = { video: { facingMode: "environment" }, audio: false };
// Define constants
const cameraView = document.querySelector("#camera--view"),
cameraOutput = document.querySelector("#camera--output"),
cameraSensor = document.querySelector("#camera--sensor"),
cameraTrigger = document.querySelector("#camera--trigger")
// Access the device camera and stream to cameraView
function cameraStart() {
navigator.mediaDevices
.getUserMedia(constraints)
.then(function(stream) {
track = stream.getTracks()[0];
cameraView.srcObject = stream;
})
.catch(function(error) {
console.error("Oops. Something is broken.", error);
});
}
// Take a picture when cameraTrigger is tapped
cameraTrigger.onclick = function() {
cameraSensor.width = cameraView.videoWidth;
cameraSensor.height = cameraView.videoHeight;
cameraSensor.getContext("2d").drawImage(cameraView, 0, 0);
cameraOutput.src = cameraSensor.toDataURL('image/png');
cameraOutput.classList.add("taken");
// track.stop();
};
// Start the video stream when the window loads
window.addEventListener("load", cameraStart, false);
Plik index.php
<!doctype html>
<html lang="pl">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Camera App</title>
<link rel="stylesheet" href="style.css">
<!-- <script type="text/javascript" src="skrypt.js"> </script>-->
</head>
<body>
<form method="POST" action="storeImage.php">
<!-- Camera -->
<main id="camera">
<!-- Camera sensor -->
<canvas id="camera--sensor"></canvas>
<!-- Camera view -->
<video id="camera--view" autoplay playsinline></video>
<!-- Camera output -->
<img src="//:0" alt="" id="camera--output">
<!-- Camera trigger -->
<button id="camera--trigger">Take a picture</button>
</main>
<!-- Reference to your JavaScript
file --> <script src="app.js"></script>
</form>
</body>
</html>
plik storeImage.php
<?php
$img = $_POST['image'];
$folderPath = "upload/";
$image_parts = explode(";base64,", $img); $image_type_aux = explode("image/", $image_parts[0
]); $image_type = $image_type_aux[1];
$fileName = uniqid() . '.png';
$file = $folderPath . $fileName;
file_put_contents($file, $image_base64);
?>
Po kliknięciu Take a picture pojawiają mi się błędy jak niżej
blad