Código de exemplo para usar html2canvas.js para capturar capturas de tela de páginas e exibi-las ou carregá-las

Recentemente, usei html2canvas.js ao escrever projetos, que podem realizar a função de captura de tela da página, mas encontrei muitas armadilhas, então escreverei um ensaio para registrá-las.

Ao usar o html2canvas, você pode encontrar problemas como apenas a interface visual pode ser capturada, a captura de tela não tem cor de fundo e a tag svg não pode ser capturada.

Escusado será dizer que isso pode ser obtido no github: https://github.com/niklasvh/html2canvas

Você também pode importar o link diretamente: <script src=https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.js></script>

Também é muito simples de usar. Você pode encontrar a API específica online e apenas usar image/png para gerar imagens png.

Entre eles, $(#xxx) é o div que você deseja interceptar. Ele pode ser obtido através do jquery. Claro, também pode ser obtido através do documento.

 html2canvas($(#xxx), { onrendered: function (canvas) { var url = canvas.toDataURL(image/png); window.location.href = url; } });

Para outros tipos de imagens, como jpg, imagem/jpeg, etc., você mesmo pode consultar a API.

Na verdade, a captura de tela simples foi concluída aqui. Se a interface for um pouco mais complicada, várias armadilhas podem aparecer.

Quando interceptamos uma div, se houver uma tag svg na div, ela não poderá ser interceptada em circunstâncias normais. Por exemplo, se interceptarmos um fluxograma, obteremos algo assim:

Percebe-se que as linhas do fluxograma não são interceptadas, ou seja, o svg não é interceptado. A solução neste momento é converter o svg em canvas e depois fazer uma captura de tela e fazer o upload direto do código.

Cada loop aqui é percorrer todas as tags SVG e convertê-las todas em tela

 if (typeof html2canvas !== 'indefinido') { //A seguir está o processamento de svg var nodesToRecover = []; var nodesToRemove = []; (índice, nó) { var parentNode = node.parentNode var svg = node.outerHTML.trim(); var canvas = document.createElement('canvas'); canvas.width = 650; canvas.height = 798; .posição; canvas.style.left += node.style.left; canvas.style.top += node.style.top; filho: nó }); parentNode.removeChild(node); nósToRemove.push({ pai: parentNode, filho: tela });

Canvg.js e seu arquivo de dependência rgbcolor.js são necessários aqui. Eles podem ser baixados diretamente da Internet ou importados diretamente.

Na verdade, isso é muito simples, porque é transparente por padrão. Existe um parâmetro background no html2canvas para adicionar uma cor de fundo, como segue:

 html2canvas(cloneDom, { onrendered: function(canvas) { var url =canvas.toDataURL(image/png); }, background:#fafafa});

Se o div que precisa ser interceptado exceder a interface, você poderá encontrar o problema de interceptação incompleta. Conforme mostrado na imagem acima, há apenas metade do conteúdo. Isso ocorre porque a parte invisível está oculta e o html2canvas não pode interceptar o. DOM oculto.

Então a solução neste momento é usar a clonagem, colocar uma cópia da parte que precisa ser interceptada no final da página, e então usar o html2canvas para interceptar a div completa. Após a interceptação ser concluída, remova esta parte do div. conteúdo. O código completo é o seguinte:

 function showQRCode() { scrollTo(0, 0); //Clone o nó, o padrão é falso, ou seja, os atributos do método não são copiados e verdadeiro é todas as cópias. var cloneDom = $(#d1).clone(true); //Defina o atributo z-index do nó clonado, desde que seja inferior ao nó que está sendo clonado. cloneDom.css({ cor de fundo: #fafafa, posição: absoluto, topo: 0px, índice z: -1, altura: 798, largura: 650 }); /A seguir está o processamento de svg var nodesToRecover = []; cloneDom.find('svg');//divReport é o id do dom que precisa ser interceptado em uma imagem svgElem.each(function (index, node) { var parentNode = node.parentNode; var svg = node.outerHTML .trim(); var canvas = document.createElement('canvas'); canvg(canvas, svg); if (node.style.position) { canvas.style.position += node.style.position; .style.top; } nósToRecover.push({ pai: parentNode, filho: nó }); canvas }); parentNode.appendChild(canvas }); //Anexar dinamicamente o nó clonado ao corpo. $(body).append(cloneDom); html2canvas(cloneDom, { onrendered: function(canvas) { var url =canvas.toDataURL(image/png); window.location.href = url ; cloneDom.remove(); // Limpar conteúdo clonado}, background:#fafafa });

Aqui, primeiro clone o div a ser interceptado e defina o índice z para o mínimo para evitar causar uma interface desagradável. Em seguida, o svg é processado, que foi analisado acima. Finalmente, o nó do clone é anexado ao corpo.

No renderizado, podemos usar location.href diretamente para pular para visualizar a imagem, salvá-la ou escrever o URL no src do img e exibi-lo na interface, como $('#imgId').attr('src ' ,url);

Finalmente, a imagem que acabamos de capturar pode ser exibida na interface:

Agora que o URL foi obtido, ele precisa ser carregado no backend, armazenado no banco de dados e depois carregado em outra interface exibida. Geralmente estou acostumado a usar url para armazenar caminhos de imagem em vez de armazenamento de blob.

Como preciso obter a imagem em outra interface, armazenei a imagem em um diretório de recursos no mesmo nível do webapp.

 //Armazena a imagem e retorna o caminho da imagem BASE64Decoder decoder = new BASE64Decoder(); b = decoder.decodeBuffer(product.getProPic().substring(data:image/png;base64,.length())); ByteArrayInputStream bais = new ByteArrayInputStream(b); BufferedImage bi1 = ImageIO.read String(b); url = user_resource + File.separator + img + File.separator + product_+UUID.randomUUID().toString().replace(-, )+.png String totalUrl = System.getProperty(root) + url w2 = novo arquivo (totalUrl); //Armazena o caminho relativo da imagem no banco de dados int res = productMapper.insertSelective(product);

Como outra lógica está envolvida aqui, apenas parte do código é incluída.

BASE64Decoder é usado aqui para armazenar imagens. Depois de obtermos a imagem, precisamos usar substring para interceptar o conteúdo de data:image/png;base64, porque a seguir está o URL da imagem, url.substring(data:image/png;base64,.length()) .

Para o caminho, o URL no código acima é o conteúdo que armazenei no banco de dados, e o totalUrl é o caminho real armazenado durante a operação de gravação real do ImageIO. O diretório raiz do projeto obtido pelo método getProperty() pode ser. configurado em web.xml O conteúdo a seguir e, em seguida, System.getProperty(root) podem ser usados.

 <!-- Configure o sistema para obter o diretório raiz do projeto--><context-param> <param-name>webAppRootKey</param-name> <param-value>root</param-value></context-param ><listener > <listener-class> org.springframework.web.util.WebAppRootListener </listener-class></listener>

Agora a URL da imagem é armazenada no banco de dados, e a própria imagem é armazenada no diretório do projeto no Tomcat.

Por fim, para obtê-lo da interface, basta adicionar o nome do projeto na frente da url atual < img class =depot-img src =<%=request.getContextPath()%>/`+e.proPic+` > .

Então você pode ver a imagem exibida na interface:

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.