Capture d’un élément
La capture d’un élément isole une partie précise d’une page — un tableau, un encadré, une carte — plutôt que l’écran entier. Vous indiquez l’adresse et le sélecteur CSS du bloc voulu, et nos serveurs renvoient une image cadrée sur ce seul élément, sans le menu ni la publicité autour.
Exécuter en ligne
Exécutez cette tâche sur nos serveurs, avec votre compte. Les outils gratuits tournent dans votre navigateur ; celui-ci est facturé sur votre solde KIT au prix affiché ci-dessus.
Désigner l’élément avec un sélecteur
Chaque bloc d’une page porte une adresse interne, exprimée par un sélecteur CSS : un identifiant, une classe, une balise. C’est cette référence que vous fournissez pour dire précisément quoi capturer. Un développeur la reconnaît d’emblée ; pour les autres, l’outil d’inspection intégré au navigateur permet de la retrouver en quelques clics, en pointant l’élément voulu. Le sélecteur agit comme une pince : il attrape le bon morceau et laisse le reste de côté.
Un cadrage net, sans le décor
L’intérêt est d’obtenir une image propre, débarrassée de tout ce qui entoure l’information utile. Là où une capture d’écran classique embarque le menu, les bandeaux et la publicité, la capture d’élément ne retient que le bloc désigné : un tableau tarifaire, un graphique, un avis. Le résultat s’insère directement dans un document, une présentation ou un e-mail, sans avoir à recadrer l’image à la main ensuite.
Retrouver le bon sélecteur
Si le sélecteur ne correspond à aucun élément de la page, aucune image ne peut être produite : l’outil vous le signale plutôt que de renvoyer une capture vide. Mieux vaut donc vérifier la référence avant de lancer la capture, surtout sur un site dont la structure change souvent. Un sélecteur trop large risque d’attraper plus que prévu ; un sélecteur trop précis peut ne rien trouver après une refonte de la page.
Quand cet outil est le bon
La capture d’élément brille quand vous savez exactement ce que vous voulez montrer : un seul chiffre-clé, un composant d’interface, une section d’un long document. Pour saisir la page entière, la pleine page reste plus adaptée ; pour une vue d’ensemble rapide, la capture standard suffit. Choisissez l’élément dès que le décor autour nuit au message et que seule compte l’information contenue dans un bloc précis.
Cas d’usage
Tableau de tarifs
Pour une note interne, Camille Moreau capture le seul tableau de prix d’une page fournisseur, sans le reste de la fiche autour.
Illustration soignée
Studio Lumen SAS extrait un composant d’interface d’une page de démonstration pour l’insérer, net et cadré, dans une présentation client.
Documentation technique
Un développeur capture un encadré d’avertissement précis d’une documentation en ligne, afin de l’intégrer à son propre guide interne.
Suivi d’un indicateur
Julien Lefèvre garde une image du seul bloc « note moyenne » d’une fiche, pour en suivre l’évolution d’une semaine à l’autre.
Questions fréquentes
Comment désigner l’élément à capturer ?
Par un sélecteur CSS — un identifiant, une classe ou une balise — qui pointe le bloc voulu. L’outil d’inspection du navigateur aide à le retrouver si vous ne le connaissez pas.
Que se passe-t-il si le sélecteur ne correspond à rien ?
Aucune image n’est produite et l’outil vous le signale. Vérifiez la référence : un site refondu peut avoir changé la structure de ses blocs, rendant l’ancien sélecteur caduc.
Puis-je capturer plusieurs éléments d’un coup ?
Chaque capture cible un élément par requête. Pour plusieurs blocs, lancez autant de requêtes, chacune avec son sélecteur, et vous obtenez une image nette par élément.
Combien coûte la capture d’un élément ?
Le tarif est de $0.040 par requête et $0.001 par URL, en dollars US. Le prix ne dépend ni de la taille du bloc ni de la complexité du sélecteur.
L’adresse et l’image sont-elles conservées ?
Non. La page est chargée le temps de cadrer l’élément et de produire l’image, puis l’URL et le fichier sont écartés de nos serveurs.
Faut-il un compte pour l’utiliser ?
Non, aucune inscription. Le service se règle à l’usage ; pour une facture, écrivez à [email protected], où une vraie personne vous répond.
Pour les développeurs — accès API
Tout sur cette page est disponible par programmation. Cette section s'adresse aux équipes qui veulent l'intégrer à leurs systèmes ; les autres peuvent simplement utiliser l'outil ci-dessus.
Endpoint
Authentification par jeton Bearer : un seul POST met la tâche en file d’attente, et le résultat vous parvient par webhook ou lien signé.
Appeler depuis votre 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)Exemple de requête
{
"url": "https://ejemplo.com"
}Exemple de réponse
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "web.screenshot_element",
"status": "queued",
"_links": {
"result": "/tasks/tsk_…/result"
}
}L’API est asynchrone : chaque appel renvoie un task_id immédiatement, puis vous interrogez l’état à raison d’une requête par seconde.
Tarifs
Le prix est publié, sans tokens ni crédits. Une tâche qui échoue n’est pas facturée.
Limites
timeout_sec | 30 |
max_crawl_pages | 25 |
Erreurs
| HTTP | Code | Signification |
|---|---|---|
401 | unauthorized | Clé API absente ou invalide : vérifiez l’en-tête Authorization. |
402 | insufficient_balance | Solde insuffisant : rechargez votre compte pour lancer cette tâche. |
404 | unknown_type | Type de tâche inconnu : vérifiez le champ type de votre requête. |
429 | rate_limited | Trop de requêtes : ralentissez la cadence, puis réessayez. |
422 | task_failed | La tâche a échoué : elle ne vous est pas facturée. |