Botão print screen

[reynansoares 0]

Olá, tenho uma página que uso como uma espécie de formulário. Clique aqui para acessar a página.

 

A idéia é a pessoa preencher o desenho com as cores que preferir, para isso usei layers em css z-index, criei um botão com propriedades javascript que altera a z-index da imagem da cor assim colorindo o modelo.

 

Gostaria de criar um botão para que faça um efeito de print screen e salve o arquivo (imagem com o modelo colorido) no computador da pessoa que apertar o botão. Alguém sabe alguma maneira de fazer um botão desse, poderia me ajudar?

 

Grato.

[JCMais 75]

Eu não conheço nenhuma outra forma à não ser com Canvas.

[reynansoares 0]

Eu não conheço nenhuma outra forma à não ser com Canvas.

E como se utiliza esse Canvas ?

[51L3N7 1]

Fazer com canvas? lol

Canvas é para desenhar na tela, e ele quer um botão que salve a imagem no HD do usuário.

E acho que não da para fazer isso com Javascript não.

[reynansoares 0]

Fazer com canvas? lol

Canvas é para desenhar na tela, e ele quer um botão que salve a imagem no HD do usuário.

E acho que não da para fazer isso com Javascript não.

é exatamente isso que eu quero, tem algum modo de fazer?

[JCMais 75]

Fazer com canvas? lol

Canvas é para desenhar na tela, e ele quer um botão que salve a imagem no HD do usuário.

E acho que não da para fazer isso com Javascript não.

Tu não entendestes.

Ele pode criar este mesmo desenho que ele fez com canvas, e ir colorindo as partes do mesmo de acordo com as escolhas do usuário. Depois redirecionar o usuário para imagem criada, que é uma url de dados codificada em base64.

 

Ele pode pegar a url da "snapshot" da área atual do canvas usando o metódo .toDataURL(); ou pode usar alguma outra biblioteca que já exista, como a Canvas2Image. Isso é um pouco complexo, porque exige fazer o desenho, colorir as partes, e etc, mas basta estudar que se chega lá.

 

@reynansoares

Sobre como se utiliza Canvas, comece pelo link que passei no primeiro post.