У меня есть веб-приложение для камеры, в котором я сейчас снимаю и показываю захваченное изображение в моем index.html. Этот код работает хорошо.
Теперь я хочу поделиться данными снятого изображения и показать их в другом HTML, т.е. part1.html.
Но когда я помещаю те же данные в кодировке Base 64, что иimg src внутри part1.html, я получаю пустое изображение. Почему это происходит? И как я могу решить это? Ниже приведен мой код.
index.html
<html lang=”en”>
<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">
<!-- Name of the app -->
<title>Camera App</title>
<!-- Link to main style sheet -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- 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>
</body>
app.js
// Set constraints for the video stream
var constraints = { video: { facingMode: "user" }, audio: false };
var track = null;
// 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/webp");
var cameraValue = cameraSensor.toDataURL("image/png");
cameraOutput.src = cameraValue;
console.log(cameraValue)
var queryString = "?para1=" + cameraValue;
//window.location.href = "part1.html" + queryString;
cameraOutput.classList.add("taken");
// track.stop();
};
// Start the video stream when the window loads
window.addEventListener("load", cameraStart, false);
part1.html
<!DOCTYPE html>
<html>
<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">
<!-- Name of the app -->
<title>Captured Image</title>
<!-- Link to main style sheet -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<h4>These are the data from index.html.</h4>
<img src="//:0" alt="" id="camera--output">
<script>
function getParameterByName(name, url) {
if (!url) url = window.location.href;
name = name.replace(/[\[\]]/g, '\\$&');
var regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)'),
results = regex.exec(url);
if (!results) return null;
if (!results[2]) return '';
return decodeURIComponent(results[2].replace(/\+/g, ' '));
}
cameraOutput = document.querySelector("#camera--output")
var foo = getParameterByName('para1');
console.log(foo);
cameraOutput.src = foo;
</script>
</body>
</html>