I need help to put an image format to the file that I download with canvas, the whole process is done successfully unless you have downloaded the image appears as download without no format I would appreciate your giving me a hand.
Html Code:
<body onload="init();">
<div id="header" style="position:relative; height: 90px;width: 980px;">
<img src="imagenes/logo_small.jpg" width="180" height="91" border="0" />
<img src="imagenes/banner.jpg" width="740" height="91" />
</div>
<div id="div_contedor">
<div id="div_1" >
<video id="video" autoplay></video>
</div>
<div id="div_2">
<canvas id="myCanvas" width="200" height="150"></canvas>
</div>
<div id="boton_foto">
<button id="boton" onclick="snapshot();">Hacer Foto</button>
</div>
<div id="boton_guardar">
<button id="boton" onclick="guardar();" >Guardar Foto</button>
</div>
</div>
</body>
JavaScript code:
<script>
navigator.getUserMedia = ( navigator.getUserMedia ||
navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia ||
navigator.msGetUserMedia);
var video;
var webcamStream;
function startWebcam() {
if (navigator.getUserMedia) {
navigator.getUserMedia (
{
video: true,
audio: false
},
function(localMediaStream) {
video = document.querySelector('video');
video.src = window.URL.createObjectURL(localMediaStream);
webcamStream = localMediaStream;
},
function(err) {
console.log("The following error occured: " + err);
}
);
} else {
console.log("getUserMedia not supported");
}
}
function stopWebcam() {
webcamStream.stop();
}
var canvas, ctx;
function init() {
canvas = document.getElementById("myCanvas");
ctx = canvas.getContext('2d');
}
function snapshot() {
ctx.drawImage(video, 0,0, canvas.width, canvas.height);
}
function guardar() {
var dato = canvas.toDataURL("image/jpeg");
dato = dato.replace("image/jpeg", "image/octet-stream");
document.location.href = dato;
}
startWebcam();