UPLoad de imagens via POST - tratamento no controller

64 views
Skip to first unread message

Ari Sobel

unread,
Apr 6, 2014, 8:44:41 PM4/6/14
to web2py googlegroups
Ola Pessoal,

Nao ei se vcs ja usaram, mas encontramos um post muito interessantena web baseado em HTML5 - para acesso a camera e gravação de um snapshto da camera.

Nesse post:


Usando Chome, vc pode tirar Snapshots na tela.

Usando também outro post do David Walsh, convertemos de Canvas para imagem:


Mais precisamente neste trecho:

// Converts canvas to an image
function convertCanvasToImage(canvas) {
	var image = new Image();
	image.src = canvas.toDataURL("image/png");
	return image;
}

O que ocorre é que quando tento mandar a imagem para o controller via  jQuery Ajax - usado $.post dá tudo errado, nao consigo tratar, nem ver se a imagem chegou ao ServerSide, etc...

Vi nesse slice algo para atratar imagens que foram feitas uploads...



o que ocorre é que nao estou conseguindo tratar/receber/processar  a imagem no controller.

Já meio que percebi, por esse slice, que vou precisar usar a PIL. Blz.

Mas fiquei travado nessa parte.

Antes parecia que estava mandando via post para o ServerSide, mas agora nao consigo. Nem mandar via $.post , nem gravar a imagem subida para uma pasta dentro de Static...

Alguem ja trabalhou com isso?


abcs

Diogo Munaro

unread,
Apr 6, 2014, 9:27:09 PM4/6/14
to web2py-us...@googlegroups.com

Oi ari! Imagens não são enviadas via ajax com tanta facilidade. Precisa usar um plugin de upload de imagem que use flash ou algo parecido.

Lembro que tem um vídeo do bruno rocha ensinando como usar um desses plugins e tem slices também...

--
Você recebeu essa mensagem por estar inscrito no grupo web2py-users-brazil.
Para enviar uma mensagem ao grupo, envie email a: web2py-us...@googlegroups.com
Para se desinscrever, envie email a: web2py-users-br...@googlegroups.com
Para mais opções, visite o site do grupo em: http://groups.google.com/group/web2py-users-brazil?hl=en
---
Você recebeu essa mensagem porque está inscrito no grupo quot;web2py-users-brazil" dos Grupos do Google.
Para cancelar inscrição nesse grupo e parar de receber e-mails dele, envie um e-mail para web2py-users-br...@googlegroups.com.
Para mais opções, acesse https://groups.google.com/d/optout.

Ari Sobel

unread,
Apr 7, 2014, 8:14:51 AM4/7/14
to web2py googlegroups
Opa, Diogo, bom dia, só via gora a mensagem...
Mas, pelo que vi ali no Artigo do DAvid Walsh, inclusive vi laguns comentarem que agora, com esse recurso nao precisariam mias usar Flash....

Outra coisa, vi que o Bwoser "codifica" a imagem como uma série de caracteres.

do tipo:
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAKAAAAB4CAYAAAB1ovlvAAAgAElEQVR4XsydB4DcZbX2z/S2Zbb3vptsstn03iskoaNSbPQmNuxXbGABUVGv5arYED4bKIJILyGE9N7r9t77zuy073fezWCMKOFevZfBcbO7szP/ct5TnvOc57XkTSyLLV6/WAoLCiTBZRe/1ynXXvtOsUiMp0WsEuVfIjax8/8WnuM/t4hThmIWiVjc/NvG085r9Xc2vrrlwhUXS093p7S11ElgJCQ2/jQ1N09cHqe01/WIxTImYg2LPy1HXD6PWEIxaTjZLJZIRMYsEamcVi4up0NOHD4pQ0NB3jMihSX5kpLml1jEJkN9vZKZ65ZQxM5vYuJzu+To3iMSjUYlaolKQXmZJCSk8buwOB38jI/r6OiW9Mx03kvPS89MJGgLi80eFZ/dLXt37pRZc2bzNxyshd8HI7L9te0SDkfE5o7JirXniy3ikKcf+xN/w+Fb3bJ49SJx8PWFpzfwPX/ncsjSVbNlpLNf9u88Zq7j1LmTJcnvkZdf3CCxqE1CYZH1l67kXK3ywvPPc3w+WXneWgkGbfLYH37CUZ352Ms3Dp5VZ/38//7bhx7+tTz19BMyNNrHNRPuCSeGXSSkJIrNqc/5cuc9N0owJNJ0vE6ee+wl2bHxeSkuXCUZk6bIvd+aI5biwimx5AKXXHLFevH4kjBCkfe99wJzi+JPG0YV4yOs5pzHjYxbIv2RmFhtCXwf5Ts3v9fXOaW/c0Teue4y6ehqEKvdLr6kBBnu7pfExFQZ47VtdQ1itzjF6XZIZk6uxOwO6e/qlo7mev7eKpl5KeJPTRWHxSFHD52QSAjTtoVkyozJYrOJdDeMSUdrDYYalrzibAwxRyTEErBHJBoKSFdnJz8v4284YntMwhh1a22dZKZli5sLE5GgOO0WCWOBdpveXKyJxXSy8ZSUTphkDMpiCUosNCbbXtvN349ibSFZdt5KiQZi8upL2zCiEY49WabMniuBgbDs2LRVorERqZ4zV1L9qXJk334ZHOxnQVhkzdplEsLqXnnpVbGwmq0euyxbupzrNCC79u4UVrG8+4p3y0c+eotMmDrhDMvS2/pnnny+XGHcwNvp8Ycn/ySPP/In6e3vlFg4JgODEYlYHZKUhENhQfsz18vnvnG1jAyOH3VzY6ds+NMzsun5PZKcXCn2vEKxFGZXxiwJFrnmw5eLzyficyXKxRevwFhSjF9Tn6f/r17Qbv5fHw78ik2Gubg2bpYajfo99YJjGOAvHviFPP7go7J/115z8z2JNslKzREb7z02FpTO9pPisLnFi7V7k5LF48ySk0ePSSQ4gB0E8V6F4klIMh7i1NF6btAY9yiMV5zE3fPJsd2HZCw0yGvHp.......
(e assim vai.....)


Entendo que esse seja "codigo binário na base 64" da imagem (ou algo assim).


Veja o post abaixo, ele trata exatamente desse tipo de gravação.....[1]

data = b'''iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAAXNSR0IArs4c6QAAAIBJRE
          FUOMvN08ENgCAMheG/TGniEo7iEiZuqTeiUkoLHORK++Ul8ODPZ92XS2ZiADITmwI+sWHwi
          w2BGtYN1jCAZF1GMYDkGfJix3ZK8g57sJywteTFClBbjmAq+ESiGIBEX9nCqgl7sfyxIykt
          7NUUD9rCiupZqAdTu6yhXgzgBtNFSXQ1+FPTAAAAAElFTkSuQmCC'''

import base64
from PIL import Image
from io import BytesIO

im = Image.open(BytesIO(base64.b64decode(data)))
im.save('accept.jpg', 'JPEG')



Teria como eu passar esse "código binário na base 64" via Ajax e trata-lo via PIL ( e essas outras bibliotecas base64 e io)   e gravar numa pasta no "ServeSide" ?

Seria de enorme valia essa solução...

abcs!


Ari Sobel

unread,
Apr 7, 2014, 9:14:39 AM4/7/14
to web2py googlegroups
OIa Diogp / todos....

Só pra complementar - consegui "copiar" na mão o código binário na base 64 da imagem que capturei com a camera (usando o "Inspecionar elemento" do Chrome) e executei o código que mencionei anteriormente, apenas adaptado para PNG. E deu certo.

Agora o próximo passo seria fazer o AJAX subir esse código binário (que já acho que é isso que ele deveria fazer - apenas nao estou cosneguindo processar essa informação).

Grato

Diogo Munaro

unread,
Apr 7, 2014, 9:21:00 AM4/7/14
to web2py-us...@googlegroups.com

Ari Sobel

unread,
Apr 7, 2014, 9:57:44 AM4/7/14
to web2py googlegroups
Diogo, muito obrigado - 

Esse post ajudou muito a montar a estrutura do comando ajax corretamente e alguma informação está sendo mandada para o servido, sendo processada, porem, no try, está retornando o resultado do Except - ou seja ainda nao consegui processar a iformação corretamente no servidor.

A linha 
data: "arg=" + encodeURIComponent(arg)
Também é muito importante, pois entendo que precisa codificar a mensagem ali antes de processar.

Agora uma pergunta mais básica.
Quando envio a informaçã desta forma, 
data: "arg=" + encodeURIComponent(arg)
como faço para tratá-la no lado do Controller (SErverSide):
assim: img = request.post_vars.arg
assim: img = request.post_vars.data
assim: img = request.post_vars

Ou nenhuma das anteriores?

Valew mesmo!
Grato!!

Ari

Ari Sobel

unread,
Apr 7, 2014, 5:26:29 PM4/7/14
to web2py googlegroups
Consegui - mais tarde coloco com calma.

Abcs

Ari Sobel

unread,
Apr 8, 2014, 8:06:21 AM4/8/14
to web2py googlegroups
Ola pessoal,
o segredo é esse:

Usando o código dado pelo David Walsh http://davidwalsh.name/browser-camera

Na view:

document.getElementById("snap").addEventListener("click", function() {
context.drawImage(video, 0, 0, 160, 120);
                var canvas = document.getElementById("canvas");
                var imagem = canvas.toDataURL("image/png"); // aqui carrega na variável imagem o binario na base64
                //imagem = imagem.
                $("#texto").html(imagem);
                $.post("imagem/grava", {arg: imagem}); // aqui envia  variável imagem o binario na base64 - para o controller - que se chama na minha aplicação "imagem" funçaõ "grava"

});

No Controller:
Dentro do controller "imagem.py"

def grava():
    import sys
    
    try:
        #aqui faz os imports necessários
        import os
        import base64
        from PIL import Image
        from io import BytesIO
        #aqui nomeia as variáveis do nome da imagem
        nome_imagem='minha_imagem.png'
        nome_imagem2='minha_imagem.jpg'
        #aqui pega a string binaria base64 enviada pelo $.post
        img = request.post_vars.arg
        img =img[22:] // aqui "recorta as 22 primerias posições da string - qua nao podem ser processadas pela PIL
        
        #aqui está o código de gravação da imagem em si (PNG e JPG)
        im = Image.open(BytesIO(base64.b64decode(img))).save(request.folder + 'static/images/' + nome_imagem,'PNG')
        im2 = Image.open(BytesIO(base64.b64decode(img))).save(request.folder + 'static/images/' + nome_imagem2,'JPEG')

        retorno = "Sucesso"
        
    except IOError as erro:
        retorno="erro %s" % erro
    
    return retorno
Reply all
Reply to author
Forward
0 new messages