Comentário: Com o apoio das especificações do HTML5, tornou -se possível para o WebApp tirar fotos em telefones celulares. Abaixo, explicarei como o aplicativo da web tira fotos com seu telefone celular, exibe -as na página e as carrega para o servidor
1. Streaming de vídeo
HTML5 A API de captura de mídia fornece acesso programável à câmera, e os usuários podem usar diretamente a getusermedia para obter o fluxo de vídeo fornecido pela câmera. O que precisamos fazer é adicionar uma tag de vídeo HTML5 e obter o vídeo da câmera como fonte de entrada para esta tag (observe que apenas o Chrome e o Opera atualmente suportam getusermedia).
<videoidVideoid = videoAutoPlay = "> </video>
<Cript>
varvideo_element = document.getElementById ('vídeo');
if (Navigator.getUsermedia) {// OPERASHOULDUSEOPERA.GETUSERMEDIANOW
Navigator.getUsermedia ('vídeo', sucesso, erro);
}
funçõesccess (stream) {
video_element.src = stream;
}
</script>
Streaming de vídeo
2. Tire fotos
Para função de fotografia de fotos, usamos a tela HTML5 para capturar o conteúdo das tags de vídeo em tempo real, e os elementos de vídeo podem ser usados como entrada para imagens de tela, o que é ótimo. O código principal é o seguinte:
JavaScript Code Copy Content para a área de transferência
var canvas = document.createElement ('canvas');
var ctx = Canvas.getContext ('2D');
var cw = vw;
var ch = vh;
ctx.fillstyle =#ffffff;
ctx.fillrect (0,0, cw, ch);
ctx.drawimage (video_element, 0,0, vvw, vvh, 0,0, vw, vh);
document.body.append (Canvas);
3. Aquisição de imagens
Em seguida, queremos obter dados de imagem do Canvas. A idéia principal é usar o Todataurl do Canvas para converter os dados de tela em imagens PNG codificadas BASE64-BIT, semelhantes ao formato de dados: imagem/png; base64, xxxxx.
var imgdata = canvas.todataurl (imagem/png);
Como os dados da imagem reais são a peça após a vírgula codificada Base64, os dados da imagem processados pelo nosso servidor real devem ser essa parte e podemos obtê -los de duas maneiras.
O primeiro tipo é interceptar strings de 22 bits como dados de imagem no front-end, por exemplo:
var dados = imgdata.substr (22);
Se você deseja obter o tamanho da imagem antes de fazer o upload, pode usar:
var comprimento = atob (dados) .Length; // atobdecodesastingofdatawhichhasbeenencodedUsingBase-64Encoding
O segundo tipo é obter os dados transmitidos no back-end e interceptar a sequência de 22 bits no idioma em segundo plano. Por exemplo, em PHP:
$ imagem = base64_decode (str_replace ('dados: imagem/jpeg; base64,', $ dados);
4. Carregue fotos
No front -end, você pode usar o AJAX para fazer upload dos dados da imagem obtidos acima no script em segundo plano. Por exemplo, ao usar o jQuery:
$ .post ('upload.php', {'dados': dados});
No plano de fundo, usamos scripts PHP para receber dados e armazená -los como imagens.
functionConvert_data ($ data) {
$ imagem = base64_decode (str_replace ('dados: imagem/jpeg; base64,', $ dados);
save_to_file ($ imagem);
}
funções
$ fp = fopen ($ filename, 'w');
fwrite ($ fp, $ imagem);
fclose ($ fp);
}
Observe que a solução acima pode ser usada não apenas para o upload de fotos do aplicativo da web, mas também você pode converter a saída de tela no upload da imagem. Dessa forma, você pode usar o Canvas para fornecer aos usuários edição de imagens, como funções de corte, colorir e graffiti, e salvar as imagens editadas do usuário no servidor.