javascript - Yakalanmamış (promiste) Klonlanmış iframe içinde öğe bulunamıyor #2460

Bu hatayı nasıl düzeltebilirim?

Benim kodum:

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 );
});

Hata :

176e275da87 1ms Belge kopyası başlatılıyor
Yakalanmamış (promise içinde) Kopyalanan iframe'de öğe bulunamıyor

Cevap #1

html2canvas belgeleri şunu söylüyor (kalın olarak vurguladım):

Bu betik, kullanıcıların tarayıcısında doğrudan web sayfalarının veya bir kısmının "ekran görüntülerini" almanıza olanak tanır. Ekran görüntüsü DOM'a dayalıdır [...]

Betik, yüklenmiş olduğu sayfanın DOM'unda dolaşır. Oradaki tüm öğeler hakkında bilgi toplar ve ardından bu bilgileri sayfanın bir temsilini oluşturmak için kullanır. Başka bir deyişle, sayfanın aslında bir ekran görüntüsünü almaz, ancak DOM'dan okuduğu özelliklere dayanarak bir temsilini oluşturur.

Tüm bunlar, html2canvas'e geçirdiğiniz argümanın belgede bulunan bir öğe olması gerektiği anlamına gelir. Bu, aldığınız (yakalanmamış) hatayı açıklar:

Kopyalanmış iframe içinde öğe bulunamıyor

Görünüşe göre bu araç, belgeyi klonladığı geçici bir iframe oluşturuyor. Daha sonra, argüman olarak verdiğiniz elementi arayacak. Ancak sizin durumunuzda wrapped belgenin bir parçası olmadığından, bu arama başarısız oluyor.

Yani html2canvas'i çağırmadan önce şunları yapabilirsiniz:

 document.body.appendChild(wrapper);

Ve sonra eğer onun DOM'da kalmasını istemiyorsanız, tuvali render ettikten hemen sonra tekrar kaldırın.

İlgili makaleler