Este é um workshop JavaScript que também é enquadrado no manual de processamento de imagens do JavaScript. Aprenderemos a obter objetos de imagem JavaScript, que podemos usar para o que queremos.
Vamos mostrar várias maneiras que temos que fazer esse passo, mais geral e óbvio e outros mais específicos determinados ambientes de trabalho. No final, sempre recebemos o mesmo, uma variável que tem dentro de um objeto de imagem.
Criar uma imagem do código JavaScript
A maneira mais direta é criar seu objeto de imagem (objeto de imagem JavaScript) Instância Um objeto da imagem da imagem, desta forma:
Var Objimagen = nova imagem ();
Então, podemos atribuir valores às diferentes propriedades do objeto de imagem, para configurá-lo. Por exemplo:
img.src = ‘image-desenvolvimentowebcom.gif’;
Obtenha o objeto de imagem de uma imagem da página
Se quisermos, podemos obter O objeto de imagem através de uma das imagens na página onde estamos trabalhando, isto é, algum rótulo IMG do documento HTML atual.
Para isso, podemos acessar esse item com um documento.GetElementByID (), indicando o identificador (ID de atributo) da imagem que queremos.
var img = document.getelementbyid (“im1”)
Isso recuperaria o objeto Image IMG associado à tag IMG que possui o identificador.
Também podemos acessar nenhuma das imagens na matriz de imagem, “imagens”, depende do objeto de documento.
var img = document.Images;
Com isso, obtemos o objeto de imagem da segunda tag IMG na página.
Obtenha a imagem de objeto A Dados: URL
Outro método é usar uma imagem expressa como uma cadeia de caracteres codificada de base64, em um esquema chamado dados: URL.
var img = nova imagem ();
img.src = ‘ Dados: Imagem / GIF; Base64, R0LGODLHCWALAAAAAA5PN / Zih5BaeaAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAIHAAAAAÁSAAAIHAAAAAAAAAAAAA + HKCuo4Lmnvindo7qyrixigByOW == ‘;
com o código anterior, teríamos um objeto de imagem de uma string de texto. A imagem é pequena, portanto, o código de imagem também é curto.
Este formato de dados: O URL não está disponível em todos os navegadores, embora o mais moderno que você o suporte, como o Firefox, o Chrome, Opera ou Internet Explorer da versão 8.
Para saber se o seu navegador é compatível com esse formato, coloque este código:
document.Images.src = ‘Dados: Image / Gif; base64, r0lgodlhcwalaiaaaaa3pn / Zih5BaeaAAAAAAAAAAAAAAAAAAAAAASAAAAAAAAAASAAAIHA + HKCUO4LMNVINDO7QYRixigByOW == ‘;
Isso altera o atributo SRC do primeiro rótulo IMG na página e, portanto, alterará a imagem que é vista no navegador. Obviamente, teremos que ter uma imagem em algum lugar na página para que esta instrução funcione.