Anteriormente só podíamos capturar imagens através de outras ferramentas de captura de tela. As funções dos navegadores modernos tornaram-se cada vez mais poderosas. Com a popularização gradual do H5, o próprio navegador pode fazer capturas de tela. html2canvas é um plug-in de front-end. Seu princípio é desenhar nós Dom no Canvas. Embora muito conveniente, tem as seguintes limitações:
Como meu cenário de uso é muito simples, registre as informações de exceção, e a página de exceção também é definida por mim, então html2canvas é suficiente para usar.
A primeira vez que usei o html2canvas, o objetivo era fazer um screenshot de toda a página e gerar uma imagem para o usuário salvar.
Vamos primeiro dar uma olhada na aparência da renderização HTML.
Pela imagem renderizada por HTML, você pode ver que a imagem acima tem efeito de canto arredondado, mas quando usei html2canvas para converter a imagem, descobri que o efeito de canto arredondado da imagem não foi perdido.
Ficou assim. Depois de pensar em muitas soluções, finalmente decidi transformar os cantos arredondados na parte de trás em uma imagem de fundo. O fundo do círculo central é transparente e depois é sobreposto à imagem original por meio de posicionamento absoluto, o que equivale a uma máscara. efeito.
Obviamente, o nó DOM da imagem da máscara deve estar abaixo da imagem que requer cantos arredondados, semelhante a
<div class=avatar_img fl><div class=avatar_img fl> <img src= id=you class=avatar_pp fl /><!--Imagem original que requer cantos arredondados--> <img src=/template/images/avatar .png class=img-responsive style=posição: absoluto;><!--Imagem da máscara--></div>
Uma vez gerado, parecerá normal.
<div class=avatar_img fl><div class=avatar_img fl> <img src= id=you class=avatar_pp fl /><!--Imagem original que requer cantos arredondados--> <img src=/template/images/avatar .png class=img-responsive style=posição: absoluto;><!--Imagem da máscara--></div>Copiar código