Como construir uma lupa de imagem com Vanilla JavaScript

Se você já navegou em um site de compras, provavelmente já se deparou com o recurso de lupa de imagem. Ele permite que você amplie uma parte específica de uma imagem para uma visão mais próxima. Incorporar esse recurso pequeno, mas impactante, pode melhorar muito a experiência do usuário em seu próprio site.

Construir um ampliador de imagem de maneira uniforme e coesa pode ser um desafio. Mas percorrer essas etapas ajudará você a criar sua própria lupa do zero, sem a necessidade de depender de plug-ins de terceiros.

Quando usar uma lupa de imagem em seu projeto da Web

Uma lupa de imagem pode ser útil quando você está construindo um projeto com muitas imagens. Como mencionado anteriormente, os ampliadores de imagem são muito populares entre os sites de compras porque, às vezes, o usuário pode precisar dar uma olhada no produto antes de decidir se vale a pena comprá-lo.

Os clientes confiam exclusivamente nas informações e recursos visuais fornecidos pelo site para avaliar a qualidade, os recursos e a aparência de um produto. No entanto, as imagens estáticas sozinhas nem sempre fornecem clareza suficiente ou permitem uma avaliação abrangente do item.

Nas lojas tradicionais, os clientes podem manusear fisicamente os produtos, examiná-los de perto e avaliar sua adequação antes de comprar. Os ampliadores de imagem tentam recriar essa experiência oferecendo aos usuários um nível semelhante de escrutínio e exame virtualmente.

Lupas de imagem também podem ser úteis se você estiver construindo um aplicativo de galeria de fotos pois o zoom em uma parte específica da imagem é um recurso importante.

Construindo a Lupa de Imagem

O código utilizado neste projeto está disponível em um Repositório GitHub e é gratuito para você usar sob a licença do MIT.

Crie uma pasta e, nessa pasta, adicione um index.html arquivo, estilo.css arquivo e main.js arquivo. Adicione este código clichê ao index.html:

html>
<htmlidioma="en">
<cabeça>
<metaconjunto de caracteres="UTF-8" />
<metanome="janela de exibição"contente="largura=largura do dispositivo, escala inicial=1,0" />
<título>Lupa de imagemtítulo>
<linkrele="folha de estilo"href="estilo.css" />
cabeça>
<corpo>
corpo>
html>

Dentro de corpo tag, crie um elemento div com o nome de classe "header". Em seguida, no div "cabeçalho", adicione um h1 elemento de título para exibir o título de sua lupa de imagem.

Você pode personalizar o texto para atender às suas necessidades. Em seguida, inclua dois elementos span que fornecem instruções para usar a lupa e exibem o nível de zoom atual para o usuário.

Após a seção de cabeçalho, crie um div elemento com o nome de classe "container". Dentro deste div, adicione outro elemento div com o nome de classe "lupa" e aplique a classe "hidden" para ocultá-lo da visualização.

Este elemento representará a imagem da lupa. Em seguida, adicione uma tag de script com o atributo "src" definido como "/main.js".

<corpo>
<divaula="cabeçalho">
<h1>Lupa de imagemh1>
<período>Imprensa <forte>Seta para cimaforte> ou <forte>Seta para baixoforte> para
 aumentar ou diminuir o nível de zoom.período>
<período>Nível de zoom: <forteaula="nível de zoom">1forte>período>
div>
<divaula="recipiente">
<divaula="lupa escondida">div>
div>
<roteiroorigem="/main.js">roteiro>
corpo>

Substitua o código no estilo.css arquivo com o seguinte. Você também pode usar um Pré-processador CSS como Less se você quiser:

:raiz {
--largura da lupa: 150;
--lupa-altura: 150;
}
corpo {
mostrar: flex;
direção flexível: coluna;
itens de alinhamento: Centro;
}
.recipiente {
largura: 400px;
altura: 300px;
tamanho de fundo: cobrir;
imagem de fundo: url("https://cdn.pixabay.com/foto/2019/03/27/15/24/animal-4085255_1280.jpg");
fundo de repetição: sem repetição;
posição: relativo;
cursor: nenhum;
}
.lupa {
raio da borda: 400px;
Sombra da caixa: 0px 11px 8px 0px#0000008a;
posição: absoluto;
largura: calcular(var(--largura da lupa) * 1px);
altura: calcular(var(--lupa-altura) * 1px);
cursor: nenhum;
imagem de fundo: url("https://cdn.pixabay.com/foto/2019/03/27/15/24/animal-4085255_1280.jpg");
fundo de repetição: sem repetição;
}
período {
mostrar: bloquear;
}
.cabeçalho {
mostrar: flex;
direção flexível: coluna;
itens de alinhamento: Centro;
}
.escondido {
visibilidade: escondido;
}
div > período:enésimo filho (3) {
tamanho da fonte: 20px;
}

No main.js arquivo, recupere os elementos HTML com nomes de classe, "lupa" e "recipiente" usando o document.querySelector método e atribuí-los às variáveis lupa e recipiente, respectivamente.

Então, usando o getComputedStyle função recuperar o largura e altura do elemento lupa e, em seguida, extraia os valores numéricos das strings retornadas usando o substring e índice de métodos.

Atribuir a largura extraída à variável lupaLargura, e a altura extraída para LupaAltura.

deixar lupa = documento.querySelector(".lupa");
deixar recipiente = documento.querySelector(".recipiente");
deixar magnifierWidth = getComputedStyle (lupa).width.substring(
0,
 getComputedStyle (lupa).width.indexOf("p")
);
deixar lupaHeight = getComputedStyle (lupa).width.substring(
0,
 getComputedStyle (lupa).height.indexOf("p")
);

Em seguida, configure as variáveis ​​para o nível de zoom, nível máximo de zoom e as posições do cursor e da imagem da lupa.

deixar zoomLevelLabel = documento.querySelector(".nível de zoom");
deixar zoom = 2;
deixar maxZoomLevel = 5;
deixar ponteiroX;
deixar ponteiroY;
deixar ampliarX;
deixar ampliarY;

No bloco de código acima, ponteiroX e ponteiroY ambos representam a posição do cursor ao longo dos eixos X e Y.

Agora, defina duas funções auxiliares: getZoomLevel que retorna o nível de zoom atual e getPointerPosition que retorna um objeto com o x e y coordenadas do cursor.

funçãogetZoomLevel() {
retornar ampliação;
}
funçãogetPointerPosition() {
retornar { x: ponteiroX, y: ponteiroY }
}

Em seguida, crie adicionar um updateMagImage função que cria um novo objeto MouseEvent com a posição atual do cursor e o despacha para o elemento container. Esta função é responsável por atualizar a imagem da lupa.

funçãoupdateMagImage() {
deixar evt = novo MouseEvent("mousemouse", {
 clienteX: getPointerPosition().x,
 clienteY: getPointerPosition().y,
 bolhas: verdadeiro,
 cancelável: verdadeiro,
 visualizar: janela,
 });
 container.dispatchEvent (evt);
}

Agora, você deve adicionar um ouvinte de eventos ao objeto janela para o evento "keyup" que ajusta o nível de zoom quando o usuário pressiona as teclas "ArrowUp" ou "ArrowDown".

A função de retorno de chamada no evento "keyup" também é responsável por atualizar o rótulo do nível de zoom e acionar o updateMagImage função.

janela.addEventListener("keyup", (e) => {
se (e.chave "Seta para cima" && maxZoomLevel - Número(zoomLevelLabel.textContent) !== 0) {
 zoomLevelLabel.textContent = +zoomLevelLabel.textContent + 1;
 zoom = zoom + 0.3;
 atualizarMagImage();
 }
se (e.chave "Arrow Down" && !(zoomLevelLabel.textContent <= 1)) {
 zoomLevelLabel.textContent = +zoomLevelLabel.textContent - 1;
 zoom = zoom - 0.3;
 atualizarMagImage();
 }
});

Em seguida, adicione um ouvinte de evento ao elemento contêiner para o evento "mousemove".

​​​​​​

Na função de retorno de chamada, adicione a funcionalidade que remove a classe "oculta" do elemento de lupa para torná-lo visível e calcula a posição do mouse em relação ao contêiner, levando em consideração a rolagem da página conta.

Esta função também deve definir o estilo de transformação da lupa para a posição calculada e determine o tamanho do plano de fundo e a posição da imagem da lupa com base no nível de zoom e no mouse posição.

container.addEventListener("mousemouse", (e) => {
 lupa.classList.remove("escondido");
deixar rect = container.getBoundingClientRect();
deixar x = e.pageX - rect.left;
deixar y = e.pageY - rect.top;
 x = x - janela.scrollX;
 y = y - janela.scrollY;
 magnifier.style.transform = `traduzir(${x}px, ${a}px)`;
const imgWidth = 400;
const imgAltura = 300;
 magnifier.style.backgroundSize =
 imgWidth * getZoomLevel() + "px" + imgHeight * getZoomLevel() + "px";
 magnifyX = x * getZoomLevel() + 15;
 magnifyY = y * getZoomLevel() + 15;
 magnifier.style.backgroundPosition = -magnifyX + "px" + -ampliarY + "px";
});

Em seguida, adicione outro ouvinte de evento ao elemento contêiner, mas desta vez o ouvinte de evento deve ouvir o evento "mouseout" e adicione a classe "hidden" de volta ao elemento lupa sempre que o mouse estiver fora do contêiner área.

container.addEventListener("mouseout", () => {
 ampliador.classList.add("escondido");
});

Por fim, adicione um ouvinte de evento ao objeto de janela para o evento "mousemove" que atualiza as posições x e y do cursor.

janela.addEventListener("mousemouse", (e) => {
 ponteiroX = e.clientX;
 ponteiroY = e.clientY;
});

É isso! Você conseguiu construir uma lupa de imagem com JavaScript vanilla.

Como os ampliadores de imagem melhoram a experiência do usuário

Ao permitir que os usuários ampliem áreas específicas de uma imagem, uma lupa permite que eles examinem os detalhes do produto com maior clareza.

Esse nível aprimorado de exploração visual inspira confiança nos usuários, pois eles podem tomar decisões informadas. Isso pode contribuir para aumentar as taxas de conversão e melhorar a retenção de clientes.