Outils pour capturer et convertir le Web
Communauté en ligne de GrabzIt

Problèmes de génération d'image pour div avec intégration à l'intérieur

Bonjour,

Je suis un client payant qui essaie d'obtenir une capture d'écran d'un élément <div> contenant un tweet intégré recouvert d'un filigrane. Le problème est que je reçois une capture d'écran du filigrane uniquement. Voici mon code ... qu'est-ce que je fais mal?

<! doctype html>
<html>
<Head>
<meta charset = "utf-8">

<style>


#tweet {
position: relative;
z-index: 1! important;
largeur: 500 px! important;
marge gauche: -8px;
marge supérieure: -10px;
}

.watermark {
position: absolue;
haut: 60px;
gauche: 100px;
z-index: 10! important;
afficher: <? php if ($ _ GET ['watermark'] == 0) {$ watermark = "none"; } elseif ($ _ GET ['watermark'] == 1) {$ watermark = ""; } echo $ watermark; ?>;
}

#tweet iframe {
frontière: aucun! important;
box-shadow: aucun! important;
}

.copywrite p {
position: absolue;
gauche: 0;
marge supérieure: -9px;
famille de polices: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
font-size: 12px;
couleur: # a2a6a8;
}
</ style>

<title> Tweet Feed Screen Feeder </title>
<script src = "https://cdn.jsdelivr.net/npm/@grabzit/js@3.4.7/grabzit.min.js"> </script>
</ Head>

<Body>

<div class = "tweet-wrapper" id = "content">
<div id = "tweet" tweetID = "<? php echo $ _GET [" tweetid "];?>"> </div>
<! - <div id = "tweet" tweetID = "1223594060818059264"> </div> ->

<img src = "images / watermark.png" class = "watermark" />
</ Div>
<div class = "copywrite">
<p> Capture d'écran de Tweet par <strong> https://sane.social </strong> © le <? php echo date ("M. d, Y"). "<br>";?> </p>
</ Div>

<script sync src = "https://platform.twitter.com/widgets.js"> </script>

<script>
window.onload = (fonction () {

var tweet = document.getElementById ("tweet");
var id = tweet.getAttribute ("tweetID");

twttr.widgets.createTweet (
id, tweet, {

conversation: «aucun», // ou tous
cartes: 'visible', // ou visible
thème: 'clair' // ou sombre
})

.then (fonction (el) {
el.contentDocument.querySelector (". footer"). style.display = "none";
});

});
</ Script>

<div id = "tweetshot"> </div>
<script type = "text / javascript">
GrabzIt ("XXXX ="). ConvertPage (window.location.href, {"target": "#content", "bheight": -1, "height": -1, "width": -1}). AddTo ("tweetshot");
</ Script>

</ Body>
</ Html>

Interrogé par le support GrabzIt le 2 mars 2020

Je ne pense pas que ce soit un problème avec GrabzIt mais avec la sécurité de l'API Twitters. Il n'aime probablement pas être utilisé dans une page HTML temporaire. Au lieu de cela, vous devez modifier votre code pour utiliser l'URL à la place:

.ConvertURL (location.href, {"target": "#content", "bheight": -1, "height": -1, "width": -1}). AddTo ("tweetshot");

Réponse du support GrabzIt le 2 mars 2020