웹 캡처 및 변환 도구
GrabzIt의 온라인 커뮤니티

내장이 포함 된 div의 이미지 생성 문제

안녕하세요

I'm a paying customer trying to get a screen shot of a <div> element containing a tweet embed overlayed with a watermark. Problem is I get a screenshot of only the watermark. Here is my code... what am I doing wrong?

<!doctype html>


<meta charset="utf-8">


#트위터 {
위치 : 상대;
z- 색인 : 1! 중요;
너비 : 500px! 중요;
왼쪽 여백 : -8px;
여백 : -10px;
}

.watermark {
위치 : 절대;
상단 : 60px;
왼쪽 : 100px;
z- 색인 : 10! 중요;
display: <?php if($_GET['watermark'] == 0){ $watermark = "none"; } elseif($_GET['watermark'] == 1){ $watermark = ""; } echo $watermark; ?>;
}

#tweet iframe {
국경 : 없음! 중요;
상자 그림자 : 없음! 중요;
}

.copywrite p {
위치 : 절대;
왼쪽 : 0;
여백 : -9px;
폰트 패밀리 : Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
글꼴 크기 : 12px;
색상 : # a2a6a8;
}


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



<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 class="copywrite">
<p>Tweet screen shot by <strong>https://sane.social</strong> © on <?php echo date("M. d, Y") . "<br>";?></p>

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


window.onload = (함수 () {

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

twttr.widgets.createTweet (
아이디, 트윗, {

대화 : '없음', // 또는 모두
cards : 'visible', // 또는 visible
테마 : 'light'// 또는 dark
})

.then (함수 (el) {
el.contentDocument.querySelector ( ". footer"). style.display = "없음";
});

});


<div id="tweetshot"></div>

GrabzIt ( "XXXX ="). ConvertPage (window.location.href, { "target": "#content", "bheight": -1, "height": -1, "width": -1}). AddTo ( "트위트 샷");



2 년 2020 월 XNUMX 일 GrabzIt 지원팀에서 요청

GrabzIt에서는 문제가 아니라 Twitter API의 보안 문제라고 생각합니다. 아마도 임시 HTML 페이지에서 사용하는 것을 좋아하지 않을 것입니다. 대신 URL을 대신 사용하도록 코드를 변경해야합니다.

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

2 년 2020 월 XNUMX 일에 GrabzIt Support에서 답변