फायरफॉक्स पोझिशनसह समस्या
वेब पृष्ठे किंवा एचटीएमएल कॅप्चर किंवा रूपांतरित कसे करावे याबद्दल प्रश्न विचारा into प्रतिमा, सीएसव्ही, पीडीएफ किंवा डीओसीएक्स दस्तऐवज तसेच व्हिडिओ रूपांतरित कसे करावे यावरही into आमचे API वापरुन GIF चे अ‍ॅनिमेटेड.
मला विशिष्ट परिस्थितींमध्ये फायरफॉक्सवर योग्यरित्या कार्य करण्यासाठी स्क्रीनशॉट मिळविण्यात समस्या येत आहे.
फायरफॉक्स एक "इनसेट" CSS गुणधर्म वापरते जी इतर कोणताही ब्राउझर वापरत नाही (https://developer.mozilla.org/en-US/docs/Web/CSS/inset). हे डावे/उजवे/टॉप/बॉटम ऐवजी वापरले जाते. किमान माझ्या FF च्या आवृत्तीमध्ये, ते कोणत्याही डाव्या/उजवीकडे/... CSS बदलून वापरण्यास भाग पाडते. GrabzIt ही मालमत्ता ओळखत नाही आणि म्हणून फायरफॉक्स वापरकर्त्यांसाठी प्रतिमा योग्य नाही.
इतर कोणाला याचा अनुभव आला आहे आणि त्यावर उपाय आहे का?
कदाचित बाह्य CSS फाईलमध्ये बदलण्यास संवेदनाक्षम असलेला CSS कोड ठेवा आणि आपल्या HTML मध्ये त्याचा संदर्भ द्या?
माझ्या बाबतीत ते चालणार नाही. माझ्याकडे css इनलाइन असणे आवश्यक आहे कारण ते नेहमीच सारखे नसते. हे वापरकर्त्यावर अवलंबून बदलते.
फायरफॉक्सच्या माझ्या आवृत्तीमध्ये मी याची चाचणी केली:
<html>
<head>
<script src="grabzit.min.js"></script>
</head>
<body>
<div id="screenshot"><style>
div{
top:1em;
left:1em;
position:absolute;
}
</style>
<div>Hello</div></div>
<script>GrabzIt("APPLICATION KEY").ConvertHTML(document.getElementById('screenshot').innerHTML,{"target": "#captureThis",
"format": "png",
"transparent": 1,
"bwidth": 1200,
"bheight": 1000,
"hd": 1,
"width": 1200,
"height": 1000,
"hide": ".modal-backdrop",
"displayid": "finalImage"}).DataURI();
</script>
</body>
</html>
पोस्ट केलेला डेटा असा होता:
<style>
div{
top:1em;
left:1em;
position:absolute;
}
</style>
<div>Hello</div>
कोणताही इनसेट पाठवला नाही.
मी याची अधिक चाचणी घेत आहे आणि असे दिसते की जेव्हा वापरकर्ता div हलवतो तेव्हा हे घडत आहे. माझे अॅप घटकांना इकडे तिकडे हलवण्याची परवानगी देते आणि जेव्हा फायरफॉक्स ते बदल करत आहे. यासाठी मी कदाचित माझ्या कोडमध्ये काही बदल करू शकतो.