Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

ac.bruno

Câmera html5+Javascript

Por , em Javascript

Recommended Posts

ac.bruno    0

ac.bruno
Postado

Pessoal, estou criando uma rotina para tirar foto de uma pessoa e posteriormente lavar a imagem...

Achei 2 scripts e estou tentando dar mixe nos 2, mas não está funcionando bem....

 

O script abaixo permite tirar o snap via câmera, porem não preenche o textarea com o base64, igual se carregado um arquivo de imagem.

Gostaria de que ao clicar no snap, preenchesse o textarea.

 

Alguém consegue me dar um help ?

 

Segue o script...

 

 

 

<html>

<style type="text/css">
#c {
border: 1px #c0c0c0 solid;
}
</style>
<body>
<script>
function getImage() {
var file = document.getElementById("file").files[0];
var reader = new FileReader();
reader.onload = function(e) {
var img = new Image();
img.onload = function() {
resizeImage(img);
};
img.src = reader.result;
}
reader.readAsDataURL(file);
}
function resizeImage(img) {
var base64 = document.getElementById("base64");
var c = document.getElementById("c");
var ctx = c.getContext("2d");
ctx.drawImage(img, 0,0,700, 700);
c.width = 700;
c.height = 700;
var ctx = c.getContext("2d");
ctx.drawImage(img, 0, 0);
base64.value = c.toDataURL("image/jpeg").replace(/^data[:]image\/[a-z]+;base64,/, "");
}
window.onload = function() {
document.getElementById("file").onchange = getImage;
};
</script>
<script>
// Put event listeners into place
window.addEventListener("DOMContentLoaded", function() {
// Grab elements, create settings, etc.
var canvas = document.getElementById("c"),
context = canvas.getContext("2d"),
video = document.getElementById("video"),
videoObj = { "video": true },
errBack = function(error) {
console.log("Video capture error: ", error.code);
};
// Put video listeners into place
if(navigator.getUserMedia) { // Standard
navigator.getUserMedia(videoObj, function(stream) {
video.src = stream;
video.play();
}, errBack);
} else if(navigator.webkitGetUserMedia) { // WebKit-prefixed
navigator.webkitGetUserMedia(videoObj, function(stream){
video.src = window.webkitURL.createObjectURL(stream);
video.play();
}, errBack);
} else if(navigator.mozGetUserMedia) { // WebKit-prefixed
navigator.mozGetUserMedia(videoObj, function(stream){
video.src = window.URL.createObjectURL(stream);
video.play();
}, errBack);
}
// Trigger photo take
document.getElementById("snap").addEventListener("click", function() {
context.drawImage(video, 0, 0, 340, 240);
});
}, false);
</script>
<video id="video" width="340" height="240" autoplay></video>
<button id="snap" class="sexyButton" accept="image/*">Snap Photo</button>
<input type="file" name="file" id="file" accept="image/*">
<form method="POST" action="save.asp">
<textarea name="base64" id="base64"></textarea>
<input type="submit">
</form>
<canvas id="c"></canvas>
</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito