Captura de un elemento
A veces lo único que vale la pena capturar es un gráfico, una tarjeta de precios, un widget embebido, y no el encabezado ni el pie de página ni los anuncios alrededor. Este endpoint apunta a un único selector CSS y devuelve exactamente ese elemento, recortado con precisión, sin nada de más.
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.
Cuando el resto de la página sobra
Una captura de página completa o de viewport es la herramienta equivocada en el momento en que solo importa una parte de la página: un widget de cotizaciones en vivo, una sola tarjeta de producto dentro de una cuadrícula de cuarenta, un gráfico embebido a la mitad de un panel. 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.
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.
Para qué se usa en la práctica
Proveedores de widgets embebibles que generan una miniatura de exactamente su widget, sin el resto de la página anfitriona alrededor, herramientas de monitoreo de precios que capturan solo el elemento de precio de un competidor según un calendario, herramientas de panel que archivan el estado renderizado de un gráfico en un momento dado, y equipos de QA que verifican que un componente específico se renderiza bien después de un cambio, sin revisar la página entera.
Pensado para verificaciones repetidas y puntuales
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. 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.
Qué puede hacer con ella
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.
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
¿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.
¿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. El acceso funciona con un saldo prepago de ForHosting KIT: se recarga desde $10.00 (no caduca) y cada solicitud se cobra a su precio publicado, así que una llamada sin saldo devuelve HTTP 402. Sin suscripción, sin tokens ni créditos inventados, y una tarea fallida no se cobra.
¿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.
¿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.
¿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.
¿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.
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, y pronto desde nuestra app, el email y Telegram.
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://ejemplo.com"}'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://ejemplo.com"
})
});
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://ejemplo.com"
},
)
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://ejemplo.com"}',
],
]));
$task = json_decode($res, true);body := bytes.NewBufferString(`{"url":"https://ejemplo.com"}`)
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://ejemplo.com"
}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. |