Capture specific sections of a page by defining a clip region. Perfect for focusing on specific UI elements, cropping screenshots, or extracting particular areas.
Image clipping allows you to capture only a specific rectangular region of a webpage instead of the entire viewport. Define the starting position (x, y) and dimensions (width, height) to precisely control what gets captured.
When to use clipping?
The origin (0, 0) is at the top-left corner of the page. Coordinates increase going right (x) and down (y).
clip_xHorizontal starting position (pixels from left)
clip_yVertical starting position (pixels from top)
clip_widthWidth of the clip region (pixels)
clip_heightHeight of the clip region (pixels)
const response = await fetch('https://www.snapshotai.dev/api/v1/screenshots', {
method: 'POST',
headers: {
'Authorization': 'Bearer sk_live_YOUR_API_KEY',
'Content-Type': 'application/json',
},
body: JSON.stringify({
url: 'https://example.com',
options: {
viewport_width: 1920,
viewport_height: 1080,
// Clip region starting at (100, 200)
// with dimensions 800x600
clip_x: 100,
clip_y: 200,
clip_width: 800,
clip_height: 600
}
})
});
// Result: 800x600px image from the specified region
const data = await response.json();
console.log('Clipped screenshot:', data.data.id);Extract just the header/navigation area:
import requests
response = requests.post(
'https://www.snapshotai.dev/api/v1/screenshots',
headers={'Authorization': 'Bearer sk_live_YOUR_API_KEY'},
json={
'url': 'https://example.com',
'options': {
'viewport_width': 1920,
'viewport_height': 1080,
'clip_x': 0,
'clip_y': 0,
'clip_width': 1920,
'clip_height': 80 # Just the top 80px (header)
}
}
)
print(f"Header screenshot: {response.json()['data']['id']}")Focus on a specific chart or dashboard widget:
// Capture a chart positioned at (300, 400) with size 600x400
{
"url": "https://dashboard.example.com",
"options": {
"viewport_width": 1920,
"viewport_height": 1080,
"wait_for_selector": "#sales-chart",
"clip_x": 300,
"clip_y": 400,
"clip_width": 600,
"clip_height": 400
}
}Extract product images from e-commerce pages:
curl -X POST https://www.snapshotai.dev/api/v1/screenshots \
-H "Authorization: Bearer sk_live_YOUR_API_KEY" \
-d '{
"url": "https://shop.example.com/product/123",
"options": {
"viewport_width": 1200,
"viewport_height": 1600,
"wait_for_selector": ".product-image",
"clip_x": 50,
"clip_y": 100,
"clip_width": 500,
"clip_height": 500
}
}'Capture the center portion of a page:
// Capture 800x600 from center of 1920x1080 viewport
const viewportWidth = 1920;
const viewportHeight = 1080;
const clipWidth = 800;
const clipHeight = 600;
{
"url": "https://example.com",
"options": {
"viewport_width": viewportWidth,
"viewport_height": viewportHeight,
"clip_x": (viewportWidth - clipWidth) / 2, // 560
"clip_y": (viewportHeight - clipHeight) / 2, // 240
"clip_width": clipWidth,
"clip_height": clipHeight
}
}Set Viewport First
Always define viewport_width and viewport_height when using clipping to ensure consistent coordinates.
Wait for Content
Use wait_for_selector to ensure the element you want to clip is fully loaded and positioned.
Account for Responsive Design
Element positions may change at different viewport sizes. Test clip coordinates for each target viewport width.
Use DevTools to Find Coordinates
Use browser DevTools to inspect elements and determine their position and dimensions before setting clip parameters.
Combine with JavaScript
Use JavaScript execution to calculate element positions dynamically if they vary by content.
Use JavaScript to dynamically calculate clip coordinates based on element positions:
const response = await fetch('https://www.snapshotai.dev/api/v1/screenshots', {
method: 'POST',
headers: {
'Authorization': 'Bearer sk_live_YOUR_API_KEY',
'Content-Type': 'application/json',
},
body: JSON.stringify({
url: 'https://example.com',
options: {
viewport_width: 1920,
viewport_height: 1080,
// Execute JavaScript to get element position
execute_script: `
const element = document.querySelector('#target-element');
const rect = element.getBoundingClientRect();
// Store coordinates for clipping
window.__clipCoords = {
x: rect.left,
y: rect.top,
width: rect.width,
height: rect.height
};
`,
// Use the calculated coordinates
// Note: You'll need to run this in two steps:
// 1. Get coordinates via script
// 2. Use coordinates for clipping
wait_for_selector: '#target-element'
}
})
});Note: For truly dynamic clipping based on element positions, you may need to use JavaScript execution in combination with templates or a two-step process.
Our team can help you determine the right clip coordinates for your specific use case.
Contact Support