Faça perguntas sobre como capturar ou converter páginas da Web ou HTML into imagens, documentos CSV, PDF ou DOCX, além de como converter vídeos into GIF animado usando nossa API.
Estou tendo problemas para fazer a captura de tela funcionar corretamente no Firefox em determinadas situações.
O Firefox usa uma propriedade CSS "inset" que nenhum outro navegador usa (https://developer.mozilla.org/en-US/docs/Web/CSS/inset). É usado em vez de esquerda/direita/superior/inferior. Pelo menos na minha versão do FF, ele até força seu uso, substituindo qualquer CSS esquerdo/direito/.... GrabzIt não reconhece esta propriedade e por isso a imagem não é correta para usuários do Firefox.
Alguém mais passou por isso e tem uma solução.
Talvez colocar o código CSS que pode ser alterado em um arquivo CSS externo e referenciá-lo em seu HTML dessa forma?
Isso não funcionaria no meu caso. Preciso ter o css inline porque nem sempre é o mesmo. Ele muda dependendo do usuário.
Na minha versão do FireFox testei com isto:
<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>
Os dados postados foram estes:
<style>
div{
top:1em;
left:1em;
position:absolute;
}
</style>
<div>Hello</div>
Não houve inserção enviada.
Tenho testado mais isso e parece que isso está acontecendo quando o usuário move uma div. Meu aplicativo permite que os elementos sejam movidos e é aí que o Firefox está fazendo essa alteração. Provavelmente posso fazer algumas alterações em meu código para compensar isso.