Ir para conteúdo

Arquivado

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

Insanity

Como carregar uma imagem com JavaScript?

Recommended Posts

Bom, eu queria fazer uma imagem com canvas, consegui transforma-lá em imagem e tudo mais. Mas quero que o usuário personalize o fundo, tanto upando uma imagem, quanto colocando o link. Mas percebi que de alguma forma tem que carregar essa imagem.

 

Por exemplo, eu tenho o meu html de selecionar o arquivo:


Tema: 
<select  onchange="personalizado();" class="entradaComum"  id="tema">


<option value="perso">Personalizado </option>
<option value="black">Preto </option>
<option value="blue">Azul </option>
<option value="yellow">Amarelo </option>
<option value="green">Verde </option>
<option value="red">Vermelho </option>


<option value="gray">Cinza </option>
<option value=" #77008B ">Roxo </option>
<option value="orange">Laranja </option>
<option value="#804200 ">Marrom </option>
<option value="#0F004B ">Azul Escuro </option>
<option value="#005D13 ">Verde Escuro </option>
</select>Faça o upload da imagem: <input type="file" id="pegaImagem" class="entradaComum" /></div>

Até ai Ok!

Tenho um botão ativado por um evento onClick, que faz a função principal e o meu canvas:

function gerarAvatar(){
//Acima ainda tem Uma parte do codigo, onde pega algumas informações do usuario...
//Aqui desenho o canvasvar c = tela.getContext("2d");
// Aqui no caso, eu coloque a opção de cor e de imagem, só não mudei ainda, pq não sei como fazer uma escolha no codigo para isso
//Exemplo, se o usuario colocar uma imagem no Html que coloquei acima, c.drawImage, senão essa parte da cor
c.fillStyle = cor;
c.fillRect(0, 0, base, altura);


c.textAlign = "center";
c.shadowBlur=20;
c.shadowColor="black";
c.font =  fonte + "px Georgia";
c.fillStyle = "white";
c.fillText(userName, base/2, ((+altura) - (altura/11)));
c.shadowColor="black";
//Fim do canvas
//Aqui tem onde salva a imagem e tals
//E tem mais abaixo um onchange que faz aparecer o html acima caso o usuario tenha esolhido personalizado

Bom, tem isso aqui, parece pequeno mas não entendi nem a metade e não sei aplicar nem a pau no meu codigo seguindo a função principal... Se puderem simplificar ou me explicar essa solução... http://jsfiddle.net/influenztial/qy7h5/

 

 

Obrigado!

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

Então, fiz o seguinte, em vez de pegar um arquivo do usuario, eu pego um link, o que deu certo, mas com imagem ele não criar um png em cima do canvas, dá o seguinte erro no console do Chrome: Uncaught SecurityError: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.

 

Será que precisa carregar de alguma forma, pq no canvas ele coloca a imagem, mas no toDataURL não, aparece isso.

 

Me ajude, por favor. Eu já vi um outro exemplo que faz o toDataURL com uma imagem de fundo!

 

Obrigado desde já!


O que traduzindo fica, como se não suportasse um canvas estragado, infectado, isso quer dizer, que a imagem tem que cobrir o canvas e não passar nada pra fora, pelos menos acho que é isso. Mas eu coloquei uma imagem de tamanho menor que o canvas e o erro persistiu, então não sei o que pode ser...

Compartilhar este post


Link para o post
Compartilhar em outros sites

×

Informação importante

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