Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Canvas HTML5 para montagens com imagens #7

Closed
rcgivisiez opened this issue Jul 29, 2016 · 12 comments
Closed

Canvas HTML5 para montagens com imagens #7

rcgivisiez opened this issue Jul 29, 2016 · 12 comments

Comments

@rcgivisiez
Copy link
Contributor

Precisamos de ajuda!

Temos algumas das ideias que envolvem fazer montagem de imagens, que hoje podem ser feitas com softwares como Gimp ou Photoshop, mas isso “não escala”.

O ideal é que a implementação desse tipo de ideia funcione via navegador, não necessariamente via celular, mas no mínimo no desktop.

Exemplos práticos:

  • Montagens de “quem é esse pokémon?” onde a foto interna é de um animal para adoção;
  • Foto de animal para adoção com camada de texto, bordas estilizadas, ou até mesmo filtro.

Público-alvo:

  • Assessoria de imprensa de centro de zoonoses;
  • ONGs de proteção a animais;
  • Protetores de animais em geral.

Nível de habilidade para o usuário final:

  • Inviável pedir que imagens enviadas tenham exatamente uma largura e altura;
  • Não é garantido que o tamanho do arquivo vai ter limites mínimos ou máximos (pode aparecer foto de 13MB tirada direto de uma câmera de celular);
  • Interface preferencialmente simples (ex.: botão verde enorme para fazer download, e não “clique com botão direito para salvar arquivo”).

O pessoal pode usar o espaço aqui para indicar bibliotecas ou técnicas pra a execução disso. A partir das possibilidades reais de implementação dadas por vocês, nossa iniciativa poderá tirar conclusões de ações práticas.

@icoffani icoffani changed the title [codigo] Canvas HTML5 para montagens com imagens Canvas HTML5 para montagens com imagens Jul 29, 2016
@hiwllc
Copy link

hiwllc commented Jul 29, 2016

Boa noite, há alguns meses precisei de uma solução semelhante, a principio optei por usar uma biblioteca pronta, depois de pesquisar algumas acabei utilizando o fabricjs pela simplicidade, infelizmente devido ao prazo apertado acabamos decidindo pegar uma coisa pronta e adaptar, infelizmente não guardei o que já tinha desenvolvido 😞 .

@cassianorsilva
Copy link

Talvez, para trabalhar as imagens, poderia ser utilizado a biblioteca: node-imagemagick-native antes de colocar no canvas.

@tofanelli
Copy link

algo assim?

https://pixlr.com/editor/
https://www.sumopaint.com/home/

@fititnt
Copy link
Member

fititnt commented Jul 29, 2016

No momento, é pra ser algo um pouco mais simples. Está mais para algo como "memegenerator" (imagens padrões, textos que mudam) ou "twibbon" (foto muda, mas uma camada é aplicada) do que um editor completo, estilo Paint ou Photoshop.

No momento atual, a iniciativa tem apenas uma landing page estática. Provavelmente isso não deve mudar tão cedo, ate pra estimular ajuda de programadores. O ponto é que, por uma estratégia de divulgação, as coordenadoras @icoffani e @rcgivisiez estão considerando ver meios de quem sabe ir um pouco mais alem, mas não vale muito a pena fazer algo muito complexo sem antes ver se tem interesse do publico final.

Isso é menos sobre "quão bonito é o código" e mais sobre "algo que funciona" mesmo se a gente tiver que usar uma API ou um serviço de terceiro. Isso pode melhorar mais tarde, mas se pra muito em breve, tipo antes do dia 31 de Julho, já tivermos algo minimamente funcional, se algum jornal for divulgar a ideia, a gente já tem algo pronto

@fititnt
Copy link
Member

fititnt commented Jul 29, 2016

Vou dar um exemplo. Não quer dizer que é isso que seria a melhor opção, mas é um exemplo.

Abaixo é uma imagem muito comum relacionada a Pokemons. Se o pessoal do marketing achar que tem apelo permitir que ongs usem um "pokemon-animal-para-adocao-generator" seja uma boa ideia, o resultado final poderia ser um usuário enviar uma foto qualquer, e isso ficar atrás de uma imagem como essa aqui.

who-is-that-pokemon

Muito provavelmente é mais sobre apenas mesclar texto em uma imagem, ou mesclar imagens e permitir download.

@icoffani
Copy link
Member

Oi programadores! MUITO obrigada pela colaboração de vocês.

O nosso público-alvo tende a gostar de vídeos e gifs. Uma das nossas idéias seria permitir montagens que façam um animal resgatado e disponível para adoção se pareça mais com um pokémon, entendem?

Por exemplo: quando a pessoa faz upload de uma foto, ela pode arrastar um chapéuzinho do Pikachu, ou então uma roupinha do Charmander e, quem sabe colocar algum texto simples em um local padrão (sem muitas firulas). Depois disso ela pode baixar essa imagem customizada e divulgar na própria página.

Pra terem ideia do nosso tipo de público, dêem uma olhada em https://www.facebook.com/PokemonGoVet/. Queremos cativar principalmente pessoas entre 16 a 28 anos, na sua maioria mulheres (mesmo que o público masculino não esteja excluído, pelo o que notamos, as mulheres se interessaram mais até agora) e muitas dessas pessoas gostam de imagens e vídeos meigos. Isso pode parecer algo infantil, mas a intenção é justamente trazer pra primeira adoção gente que gosta disso.

@hiwllc
Copy link

hiwllc commented Jul 29, 2016

@fititnt, @icoffani Deu pra entender bem a ideia.

Na minha situação, acabei usando esse mas sinceramente não sei se é 'aplicável' ao que vocês precisam.

@lbotinelly
Copy link

Sugestão de processo de implementação:

Utilize uma lib para extrair o contexto de imagem (a parte que importa) do fundo. Existem soluções tanto pagas quanto gratuitas para isso.

Exemplo a seguir:

O conteúdo a seguir pode ser implementado tanto como solução client- como server-side.

  • De posse da imagem com canal alfa, extraia o canal e inverta:
    untitled3
  • Aplique sobre o fundo 'Quem é esse Pokémon?':
    untitled
  • Finalmente, revele a imagem original:
    untitled2

@tawsbob
Copy link

tawsbob commented Jul 29, 2016

Posso ajudar!

Precisamos de uma API para cadastrar o bicho e exibir em algum lugar correto?
ou só o gerador de imagens?

@fititnt
Copy link
Member

fititnt commented Jul 30, 2016

Opa @tawsbob, creio que é mais pra gerar imagens mesmo.

É muito provável que a forma de crescer mais rápido é permitir que as pessoas possam pegar, criar a imagem, baixar ela, e dai usar como referência na hora de divulgar um novo animal pra adoção.

Claro que pode valer a pena ter URL pra compartilhamento, mas não sei se vale a pena fazer isso sem antes ver se as pessoas começam a usar o modo mais simples.

A não ser que já exista uma solução pronta, como fazer um fork de algum memegenerator open source, creio que é melhor primeiro só fazer funcionar.

@icoffani
Copy link
Member

icoffani commented Aug 4, 2016

Achei um vídeo no Facebook que exemplifica bem a ideia do que podemos fazer. No caso, pode ser um cachorro que muda de nome, e tributos (type, weight, height, etc) aleatoriamente. O que seria legal porque as pessoas se interessariam em colocar a foto de cachorro para ver o que daria, tipo aqueles testes que o pessoal adora no Facebook. Ou então uma imagem com o gramado do jogo e a pokebola mesmo.
Aqui alguns exemplos:
1
2

@rcgivisiez
Copy link
Contributor Author

Obrigado a todos pela participação aqui!

Se tivermos pelo menos mais duas pessoas pessoas, creio que vai ser feito em NodeJS. Discussões podem ser feitas também em https://pgovet.rocket.chat/channel/gerador-fotos-adocao

Vamos fechar esse issue e manter toda discussão restante em #50

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

8 participants