O uso do html2canvas para implementar capturas de tela do navegador deve ser implementado em um ambiente de servidor.
efeitoO html2canvas pode fazer capturas de tela no navegador por meio de JS puro, mas a precisão das capturas de tela precisa ser melhorada e alguns CSS não podem ser reconhecidos, portanto, o estilo da tela original não pode ser perfeitamente apresentado no canvas.
/*Não é possível omitir o overflow de múltiplas linhas, ele só pode ser oculto*/ .book_inf{ posição: relativo; overflow de texto: reticências display: -webkit-box; : 2; - orientação da caixa do webkit: vertical; Navegadores suportados /*Parâmetros: * #screenshots O ID do elemento da captura de tela necessária, a função a ser executada após a captura da captura de tela, * backgroundColor item de configuração cor de fundo * canvas é a última tela retornada após a captura de tela */function screenshotsImg(){ html2canvas (document.querySelector( #screenshots),{ backgroundColor: 'transparent',//Defina o fundo como transparente}).then(canvas => { canvasTurnImg(canvas) //Método de conversão do formato de imagem salva}); Itens de configuração disponíveis| Nome do parâmetro | tipo | valor padrão | descrever |
|---|---|---|---|
| permitirTaint | booleano | falso | Se deve permitir que imagens de origem cruzada manchem a tela --- permitir origem cruzada |
| fundo | corda | #fff | Cor de fundo da tela, se nenhuma for especificada no DOM Definir indefinido para transparente --- cor de fundo da tela, se o branco padrão não estiver definido, isso é uma armadilha, mudei para backgroundColor. |
| altura | número | nulo | Defina a altura da tela em pixels. Se for nulo, renderiza com a altura total da janela.---configuração da altura da tela. |
| cartaRenderização | booleano | falso | Se deve renderizar cada letra separadamente. Necessário se o espaçamento entre letras for usado.---Útil quando o espaçamento entre letras é definido. |
| registro | booleano | falso | Se deseja registrar eventos no console.---Informações de saída em console.log() |
| procurador | corda | indefinido | Url para o proxy que será usado para carregar imagens de origem cruzada. Se deixado em branco, as imagens de origem cruzada não serão carregadas.---Endereço do proxy. |
| tainTest | booleano | verdadeiro | Se deve testar cada imagem se ela contaminar a tela antes de desenhá-la --- se deve testar a imagem antes de renderizá-la |
| tempo esgotado | número | 0 | Tempo limite para carregamento de imagens, em milissegundos. Definir como 0 não resultará em tempo limite.---Atraso no carregamento da imagem, o atraso padrão é 0, em milissegundos. |
| largura | número | nulo | Defina a largura da tela em pixels. Se for nulo, renderiza com largura total da janela.---largura da tela. |
| usarCORS | booleano | falso | Se deve tentar carregar imagens de origem cruzada como CORS servido, antes de reverter para proxy - proxy de origem cruzada |
1. Extraia metadados de imagem diretamente do canvas
// Exporta a imagem para o formato png var type = 'png';
2. Altere o tipo mime para image/octet-stream para forçar o download do navegador diretamente.
/** * Obter mimeType * @param {String} digite o tipo MIME antigo * @return o novo tipo MIME */var _fixType = function(type) { type = type.toLowerCase().replace(/jpg/i , 'jpeg'); var r = type.match(/png|jpeg|bmp|gif/)[0]; return 'image/' + r;}; dados, substitua mime typeimgData = imgData.replace(_fixType(type),'image/octet-stream');3. Baixe a imagem para local
/** * Salvar arquivos localmente * @param {String} data Dados de imagem a serem salvos localmente * @param {String} nome do arquivo nome do arquivo */var saveFile = function(data, filename){ var save_link = document.createElementNS ('http ://www.w3.org/1999/xhtml', 'a'); save_link.href = dados; save_link.download = nome do arquivo; document.createEvent('MouseEvents'); event.initMouseEvent('clique', verdadeiro, falso, janela, 0, 0, 0, 0, 0, falso, falso, falso, falso, 0, null); event);}; // Nome do arquivo baixado var filename = 'baidufe_' + (new Date()).getTime() + '.' downloadsaveFile(imgData,nome do arquivo);Caso
Caso
O texto acima é todo o conteúdo deste artigo. Espero que seja útil para o estudo de todos. Também espero que todos apoiem a Rede VeVb Wulin.