Haga preguntas relacionadas con GrabzIt's Web Scraper Tool. Por ejemplo, cómo usar el raspador web y la API para extraer datos de páginas web, imágenes o documentos PDF.
Tengo problemas para que la captura de pantalla funcione correctamente en Firefox en determinadas situaciones.
Firefox utiliza una propiedad CSS "insertada" que ningún otro navegador utiliza (https://developer.mozilla.org/en-US/docs/Web/CSS/inset). Se usa en lugar de izquierda/derecha/arriba/abajo. Al menos en mi versión de FF, incluso obliga a usarlo reemplazando cualquier CSS izquierdo/derecho/.... GrabzIt no reconoce esta propiedad y por eso la imagen no es correcta para los usuarios de Firefox.
¿Alguien más ha experimentado esto y tiene una solución?
¿Quizás poner el código CSS que es susceptible de cambiar en un archivo CSS externo y hacer referencia a él en su HTML de esa manera?
Eso no funcionaría en mi caso. Necesito tener el CSS en línea porque no siempre es el mismo. Cambia según el usuario.
En mi versión de Firefox probé con esto:
<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>
Los datos publicados fueron estos:
<style>
div{
top:1em;
left:1em;
position:absolute;
}
</style>
<div>Hello</div>
No se envió ningún recuadro.
He estado probando esto más y parece que esto sucede cuando el usuario mueve un div. Mi aplicación permite mover elementos y es entonces cuando Firefox realiza ese cambio. Probablemente pueda hacer algunos cambios en mi código para tener en cuenta esto.