Em primeiro lugar, o documento não será movido e explicado como outros artigos. Em vez disso, ele foi escrito para uso real em projetos reais.
Índice
prefácio
Existem vários métodos que podem ser encontrados na Internet, alguns usando capturas de tela de tela e capturas de tela de plug-in. Aqui eu uso o plug-in html2canvas para mostrar que é mais fácil de usar.A seguir está uma explicação das armadilhas que encontrei no uso e uso reais.
1. Instruções antes de usar
1. Primeiro, de acordo com a descrição no documento, é feita uma captura de tela com base nos elementos do dom exibidos na página.
2. Existem certas restrições, nem todos os estilos CSS são eficazes. Mas não se preocupe, a maioria é suportada. Este é um link para suportar oficialmente as propriedades css. Em anexo está uma lista de propriedades css suportadas.
3. O ponto mais importante é que as imagens devem ser da mesma origem. Se a imagem for de vários domínios, ela será perdida após a captura de tela. Eu também a encontrei. A solução será descrita abaixo.
2. O uso real do projeto
1. Descrição do projeto
1. O requisito do projeto é gerar um pôster com base no conteúdo exibido na página e pressionar e segurar para salvar a imagem
2. O pôster exibido na página é apiretornado (há um problema entre domínios)
2. Passos para usar
1. A estrutura principal da página pode ser escrita por você, cada requisito é diferente
2. Instalação
npm install html2canvas
import html2canvas from 'html2canvas';
3. Use
onMakePicture() {
//这是选择你要进行截屏的dom
const dom = this.$refs.picDom
html2canvas(dom).then(function (canvas) {
// console.log('canvas',canvas)
const link = document.createElement("img");
link.src = canvas.toDataURL();
link.style.width = "100%";
link.style.height = "100%";
link.style.position = "absolute";
link.style.top = "0";
link.style.left = "0";
dom.appendChild(link);
});
},
3. Problema entre domínios de imagem
1. Como apia imagem retornada diretamente pelo usuário é uma imagem online, ela deve ser de vários domínios, portanto, a solução concebível é converter a imagem base64, e a base64imagem convertida pode ser convertida do front-end ou do back-end. Claro, tenho que tentar sozinho. Pode ser multipartidário ou entre domínios. No final, não tenho escolha a não ser pedir aos colegas de back-end para transferi-lo e pode ser exibido normalmente.
4. Problema de estilo CSS
1. Usei a imagem retornada pela interface background-imagepara configurá-la, então não há problema no display, mas descobri que html2canvasnão houve problema no teste no navegador do computador quando eu estava usando, e a imagem pode ser gerado normalmente, mas depois de testar no celular, constatei que não há nenhum problema. Pode ser porque a velocidade de processamento do celular não é tão rápida quanto a do computador. Ao percorrer domos elementos, base64a string da imagem é muito longa, então é tarde demais para renderizá-la, então a imagem de fundo é perdida , então adivinhe o imgrótulo e deixe doma imagem de fundo ser carregada ao carregar. .
Conhecimento adicional:
1. A estrutura da página é carregada primeiro, permitindo que você espere mais tarde css.
2. É uma imagem construída html2canvasatravessando os elementos que você precisa para gerar capturas de tela .dom
afinal
Um link para o documento está anexado: a mineração html2canvas
é legal por um tempo e a mineração é sempre legal.
Por favor, indique se há algum problema.
Bem-vindo a vir sempre se isso ajudar.