javascript - Uavbrutt (i løfte) Kunne ikke finne element i klonet iframe #2460

Hvordan kan jeg fikse denne feilen?

Min kode:

const wrapper = document.createElement("div");
const myHTMLString = "<div>Hello</div>";
wrapper.insertAdjacentHTML("afterbegin",myHTMLString);
//console.log(">>>",wrapper);
html2canvas(wrapper,{useCORS: true}).then((canvas) => {
    wrapper.appendChild(canvas); 
    console.log("canvas>>",wrapper.appendChild(canvas));
    var base64encodedstring = canvas.toDataURL('image/jpeg', 1.0);
    console.log("base6", base64encodedstring );
});

Feil :

176e275da87 1ms Starter dokumentskloning
Uopptatt (i løfte) Kan ikke finne element i klonet iframe

Svar #1

html2canvas-dokumentasjonen sier (jeg fremhever med fet skrift):

Skriptet lar deg ta «skjermbilder» av nettsider eller deler av dem, direkte i brukerens nettleser. Skjermbildet er basert på DOM-en [...]

Skriptet traverserer gjennom DOM-en til siden det er lastet på. Det samler informasjon om alle elementene der, som det deretter bruker for å bygge en representasjon av siden. Med andre ord tar det ikke egentlig et skjermbilde av siden, men bygger en representasjon av den basert på egenskapene det leser fra DOM-en.

Alt dette betyr at argumentet du sender til html2canvas må være et element som er til stede i dokumentet. Dette forklarer den (ufangede) feilen du fikk:

Kan ikke finne element i klonet iframe

Tilsynelatende lager dette verktøyet en midlertidig iframe hvor det kloner dokumentet. Deretter vil det søke etter elementet du sendte som argument. Siden wrapped i ditt tilfelle ikke er en del av dokumentet, mislykkes dette søket.

Så før du kaller html2canvas kan du gjøre:

 document.body.appendChild(wrapper);

Og så, hvis du ikke vil at det skal bli i DOM-en, fjern det igjen så snart du har canvas-renderingen.

Relaterte artikler