Html2canvas: elemento de salvamento que se estende além da janela de visualização

Criado em 3 nov. 2017 · 4Comentários · Fonte: niklasvh/html2canvas

Estou tentando usar isso para salvar uma página, que se estende além da janela de visualização, mas continua sendo cortada. Existe uma maneira de salvar. abaixo está o código que estou usando. quando eu faço o elemento pequeno o suficiente para caber na janela de visualização, ele funciona muito bem, mas a imagem que recebo é muito pequena para o que eu preciso, e aumentar o tamanho só fica embaçada. Algumas dessas imagens no tamanho que eu preciso delas são 1300px+ high

`html2canvas(preview, {
fundo: '#ffffff',
renderizado: (canvas)=>{

            canvas.toBlob((blob)=>{
                FileSaver.saveAs(blob, 'mysave.png');
            })

        }
    })`

Fonte

dking3876

Comentários muito úteis

Você pode tentar clonar o conteúdo do elemento e anexá-lo ao corpo apenas enquanto a captura ocorre e, em seguida, removê-lo. Algo como

var clone = document.getElementById('my_element').cloneNode(true);
//... style the clone so it doesn't have scroll...

return html2canvas(clone, {
        useCORS: true,
        allowTaint: false,
        logging: false
    }).then(function (canvas) {
        document.body.removeChild(clone);
        return canvas;
    });

ffflabs em 8 nov. 2017

👍3

Todos 4 comentários

Se o elemento está contido em um container, div, modal, etc que possui rolagem interna?

ffflabs em 4 nov. 2017

O container direto que eu quero capturar não tem rolagem, mas o container pai tem. Vou tentar colocar a rolagem no container direto e ver se funciona

dking3876 em 6 nov. 2017

Nada de bom. eu ajustei para que o contêiner im capturando tenha rolagem para mostrar o dom completo, e ainda é cortado na seção visível da tela.

algum outro pensamento??

dking3876 em 7 nov. 2017

Você pode tentar clonar o conteúdo do elemento e anexá-lo ao corpo apenas enquanto a captura ocorre e, em seguida, removê-lo. Algo como

var clone = document.getElementById('my_element').cloneNode(true);
//... style the clone so it doesn't have scroll...

return html2canvas(clone, {
        useCORS: true,
        allowTaint: false,
        logging: false
    }).then(function (canvas) {
        document.body.removeChild(clone);
        return canvas;
    });

ffflabs em 8 nov. 2017

👍3

Esta página foi útil?

0 / 5 - 0 avaliações