Captura de un elemento
Capture solo una parte de la página, como un bloque de precios, un gráfico o una tabla, indicando su selector CSS: la imagen se recorta a ese elemento, sin menú, barra lateral ni espacio vacío alrededor. Paga por uso, sin suscripción.
Ejecútela online
Ejecute esto en nuestros servidores con su cuenta. Las herramientas gratuitas corren en su navegador; esta cobra de su saldo del KIT según el precio de arriba.
fotografía solo un selector CSS
Por qué apuntar a un elemento en vez de recortar
Recortar una captura completa después depende de posiciones fijas en píxeles, y esas fallan en cuanto el diseño se mueve, carga un anuncio o un aviso de cookies empuja todo cuarenta píxeles hacia abajo. Los selectores CSS nombran las partes de una página desde los primeros tiempos de las webs con estilos, y esa misma forma de señalar resulta ser la manera más duradera de apuntar una captura. Mientras el elemento conserve su clase o su identificador, la captura sigue funcionando, normalmente mucho más tiempo del que aguanta cualquier coordenada tras un rediseño.
Qué recibe y dónde ayuda
Usted indica la dirección de la página y el selector del bloque que quiere. La página se carga, se localiza el elemento, la herramienta espera a que termine de dibujarse y captura solo su recuadro, sin cabecera, barra lateral ni espacio en blanco. Las herramientas de precios capturan de forma programada solo el bloque de precio de la ficha de un competidor. Los equipos de analítica guardan la imagen de un gráfico al cierre de cada periodo, y los equipos de calidad revisan un único componente después de un cambio. Si el selector no encuentra nada, recibe un error claro en lugar de una imagen en blanco.
Por qué capturar por selector es el enfoque confiable
Los selectores CSS identifican elementos de página desde los primeros tiempos del HTML con estilos, y ese mismo esquema de direccionamiento resulta ser la forma más duradera de apuntar una captura, mucho más confiable que coordenadas de píxeles fijas, que se rompen apenas cambia el layout de una página, carga un anuncio, o un aviso de cookies empuja todo cuarenta píxeles hacia abajo.
La captura basada en selector sigue funcionando mientras la clase o el id del elemento se mantengan intactos, algo que suele sobrevivir un rediseño mucho más tiempo que cualquier coordenada fija.
Qué puede hacer con ella
Monitoreo de precios de la competencia
Una herramienta de precios captura solo el elemento de precio en la ficha de producto de un competidor según un calendario, ignorando el resto de la página por completo.
Archivo de gráficos de panel
Una herramienta de analítica guarda una instantánea visual de un solo gráfico al final de cada periodo de reporte para referencia histórica.
QA a nivel de componente
Un proceso de QA captura un componente específico de la interfaz tras un cambio de código para confirmar que se renderiza bien sin revisar la página completa manualmente.
Preguntas frecuentes
¿Qué pasa si mi selector coincide con varios elementos?
La tarea apunta al elemento coincidente encontrado en la página renderizada; para resultados predecibles conviene usar un selector lo bastante específico como para identificar un solo elemento, como un id.
¿Existe un plan gratuito?
No hay capa gratuita: las capas gratis se abusan y ralentizan a todos. Sin suscripción, sin tokens ni créditos inventados, y una tarea fallida no se cobra.
¿Puedo monitorear el mismo elemento a lo largo del tiempo?
Sí, programar solicitudes repetidas contra la misma URL y selector es un patrón común para monitoreo de precios o contenido.
¿Espera a que el elemento termine de renderizarse?
Sí, la tarea espera a que el elemento apuntado termine de renderizarse antes de capturarlo, algo importante para elementos que cargan de forma asíncrona.
¿Qué pasa si el selector no coincide con nada?
La tarea reintenta hasta tres veces y luego devuelve un error claro en lugar de fallar en silencio; nunca se cobra por una captura fallida.
Herramientas relacionadas
Para desarrolladores — acceso por API
Todo lo de esta página está disponible por programación. Esta sección es para equipos que quieren integrarlo en sus sistemas; el resto puede usar la herramienta de arriba sin más.
Endpoint de API
¿Prefiere automatizarlo? Un POST autenticado crea la tarea; el resultado llega por webhook o enlace firmado. La misma capacidad también se ejecuta aquí en la web, por email y desde Telegram — y pronto también desde nuestra app.
Llámela desde su stack
curl -X POST https://api.kit.forhosting.com/web/screenshot-element \
-H "Authorization: Bearer $KIT_KEY" \
-H "Content-Type: application/json" \
-d '{"url":"https://example.com","selector":"h1"}'const res = await fetch("https://api.kit.forhosting.com/web/screenshot-element", {
method: "POST",
headers: {
"Authorization": `Bearer ${process.env.KIT_KEY}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
"url": "https://example.com",
"selector": "h1"
})
});
const { task_id } = await res.json();import os, requests
res = requests.post(
"https://api.kit.forhosting.com/web/screenshot-element",
headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
json={
"url": "https://example.com",
"selector": "h1"
},
)
task_id = res.json()["task_id"]<?php
$res = file_get_contents("https://api.kit.forhosting.com/web/screenshot-element", false, stream_context_create([
"http" => [
"method" => "POST",
"header" => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
"content" => '{"url":"https://example.com","selector":"h1"}',
],
]));
$task = json_decode($res, true);body := bytes.NewBufferString(`{"url":"https://example.com","selector":"h1"}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/web/screenshot-element", body)
req.Header.Set("Authorization", "Bearer "+os.Getenv("KIT_KEY"))
req.Header.Set("Content-Type", "application/json")
res, _ := http.DefaultClient.Do(req)Ejemplo de solicitud
{
"url": "https://example.com",
"selector": "h1"
}Ejemplo de respuesta
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "web.screenshot_element",
"status": "queued",
"_links": {
"result": "/tasks/tsk_…/result"
}
}La API es asíncrona: la llamada devuelve un task_id al instante y el resultado llega por webhook. El polling está limitado a 1 req/s por tarea.
Precio
Precio publicado — sin tokens ni créditos inventados. Una tarea fallida no se cobra.
Límites
timeout_sec | 30 |
max_crawl_pages | 25 |
Errores
| HTTP | Código | Significado |
|---|---|---|
401 | unauthorized | API key ausente o inválida. |
402 | insufficient_balance | El saldo no cubre el precio de la tarea. |
404 | unknown_type | El tipo de tarea no existe. |
429 | rate_limited | Demasiadas peticiones. Use el webhook en vez de sondear. |
422 | task_failed | La tarea falló tras 3 reintentos. No se cobra. |
Notas técnicas
Este endpoint apunta a un único selector CSS y devuelve exactamente ese elemento, recortado con precisión, sin nada de más.
Cuando el resto de la página sobra
Recortar una captura completa después es frágil (se rompe apenas el layout se mueve un píxel), mientras que apuntar directamente al elemento en el momento de capturar se mantiene preciso sin importar qué lo rodee.
Cómo funciona el apuntado
Se envía POST /web/screenshot-element con una URL y un selector CSS, y la tarea carga la página, ubica el elemento correspondiente en el DOM renderizado, espera a que termine de renderizarse y captura únicamente su recuadro delimitador: sin encabezado, sin barra lateral, sin espacio en blanco ajeno. Es asíncrona como toda tarea del catálogo: un task_id inmediato y la imagen final entregada por webhook firmado o mediante un enlace firmado válido por 24 horas.
Pensado para verificaciones repetidas y puntuales
Una captura fallida, ya sea porque el selector no coincide o la página se agota en tiempo de espera, nunca se cobra; la tarea reintenta tres veces automáticamente y luego devuelve un error claro, para que un selector roto no falle en silencio dentro de un pipeline de monitoreo. Con una base de $0.040 por solicitud más $0.001 por URL, capturar el mismo selector según un calendario resulta lo bastante asequible como para automatizarlo sin pensarlo dos veces.
Casos de integración
Miniaturas de vista previa de widgets
Un proveedor de widgets embebibles genera una imagen limpia de solo el widget para su propio sitio de marketing, sin nada de la página anfitriona alrededor.
Preguntas técnicas
¿Cómo sabe la API de captura de elemento qué capturar?
Se proporciona un selector CSS junto con la URL, y la tarea ubica ese elemento exacto en la página renderizada y captura solo su recuadro delimitador.
¿Cómo está estructurado el precio?
Una base de $0.040 por solicitud más $0.001 por URL, publicado y predecible para programar capturas recurrentes.
¿Cómo recibo la imagen?
Mediante un webhook firmado cuando la tarea termina, o un enlace firmado que se mantiene válido por 24 horas.