A ideia é experimentar com o desenho em Canvas por meio de uma nova prática e ao mesmo tempo repassar todos os modos que existem de obter uma imagem por meio de Javascript.
Como já foi explicado no mencionado artigo, existem diversas maneiras de conseguir objetos Image em Javascript, que depois poderíamos pintar em um canvas. Vamos vê-lo diretamente sobre o código fonte deste exemplo:
1.- Trazer uma imagem que há na página: por meio do método getElementById(), enviando como parâmetro o identificador da etiqueta IMG da imagem desejada.
//Crio um objeto Image com uma imagem da pagina
var img = document.getElementById("im1");
//a seguir a desenho no canvas
ctx.drawImage(img, 10, 10);
2.- Através do Array de images: Também de uma imagem que haja na página, em uma etiqueta IMG. Acessemos o array com o índice da imagem segundo a ordem de aparição no código HTML.
//consigo uma imagem a partir do array de imagens
ctx.drawImage(document.images[1], 122, 20);
3.- Criando nosso objeto Image: Que é a forma com que trabalhamos no artigo anterior. E, portanto, não vamos repetir as explicações.
//um objeto Image
var imagem = new Image();
imagem.src = "http://www.desarrolloweb.com/images/iconos/user_go.png";
imagem.onload = function(){
ctx.drawImage(imagem, 330, 195);
}
4.- Especificar a imagem em formato dado:url: que é uma cadeia de caracteres em formato Base64 que permite especificar elementos como imagens a partir de código, mas como se esses elementos fossem adquiridos remotamente.
//através de um "dado: url"
var img = new Image();
img.src = 'data:image/gif;base64,R0lGODlhCwALAIAAAAAA3pn/ZiH5BAEAAAEALAAAAAALAAsAAAIUhA+hkcuO4lmNVindo7qyrIXiGBYAOw==';
ctx.drawImage(img, 300, 200);
5.- Acessar o desenho desenhado em outro canvas: para mostrar em um canvas o conteúdo de outro, como se fosse uma imagem.
//consigo uma imagem a partir de um canvas
var imgCanvas = document.getElementById("canvas2");
ctx.drawImage(imgCanvas, 100, 120);
Este quinto e último método permite algumas aplicações interessantes, como mostrar em um canvas uma miniatura do que há em outro canvas.
Se verá que na realidade são criados dois canvas. Um só é criado para que possamos copiá-lo em outro canvas.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"
>
<html>
<head>
<title>Imagees em Canvas</title>
<script language="javascript">
function cargaContextoCanvas(idCanvas){
var elemento = document.getElementById(idCanvas);
if(elemento && elemento.getContext){
var contexto = elemento.getContext('2d');
if(contexto){
return contexto;
}
}
return false;
}
window.onload = function(){
//carrego um caminho em um canvas, para depois trazê-lo como imagem
var ctx = cargaContextoCanvas('canvas2');
if(ctx){
ctx.fillStyle = '#990000';
ctx.beginPath();
ctx.moveTo(50,15);
ctx.lineTo(112,15);
ctx.lineTo(143,69);
ctx.lineTo(112,123);
ctx.lineTo(50,123);
ctx.lineTo(19,69);
ctx.closePath();
ctx.fill();
}
//Recebemos o elemento canvas
var ctx = cargaContextoCanvas('meucanvas');
if(ctx){
//Crio um objeto Image com uma imagem da pagina
var img = document.getElementById("im1");
ctx.drawImage(img, 10, 10);
//consigo uma imagem a partir do array de imagens
ctx.drawImage(document.images[1], 122, 20);
//consigo uma imagem a partir de um canvas
var imgCanvas = document.getElementById("canvas2");
ctx.drawImage(imgCanvas, 100, 120);
//um objeto Image
var imagen = new Image();
imagen.src = "http://www.desarrolloweb.com/images/iconos/user_go.png";
imagem.onload = function(){
ctx.drawImage(imagem, 330, 195);
}
//através de um "dado: url"
var img = new Image();
img.src = 'data:image/gif;base64,R0lGODlhCwALAIAAAAAA3pn/ZiH5BAEAAAEALAAAAAALAAsAAAIUhA+hkcuO4lmNVindo7qyrIXiGBYAOw==';
ctx.drawImage(img, 300, 200);
}
document.images[1].src = 'data:image/gif;base64,R0lGODlhCwALAIAAAAAA3pn/ZiH5BAEAAAEALAAAAAALAAsAAAIUhA+hkcuO4lmNVindo7qyrIXiGBYAOw==';
}
</script>
</head>
<body>
<h2>Canvas que estou criando com uma serie de imagens</h2>
<canvas id="meucanvas" width="500" height="400">
Seu navegador não suporta canvas.
</canvas>
<p>
<div style="display: none;">
<h2>Coisas que ponho aqui para acessar a partir de Javascript</h2>
<img src="canvas-html5.png" id="im1">
<img src="logo-grande.jpg">
<p>
<canvas id="canvas2" width="150" height="150">
Recicle seu navegador!!
</canvas>
</div>
</body>
</html>
Este exemplo pode ser visto em uma página à parte.
Em futuros artigos, mostraremos como podemos alterar a forma das imagens dinamicamente, para mostrá-las no canvas com algumas mudanças.
