Integrating Screenshots into Your Application

01const express = require('express');
02const axios = require('axios');
03const app = express();
04
05app.post('/generate-screenshot', async (req, res) => {
06  try {
07    const { url } = req.body;
08    
09    const response = await axios.post('https://api.screenshotapi.com/capture', {
10      url,
11      width: 1280,
12      height: 800,
13      fullPage: true
14    }, {
15      headers: {
16        'Authorization': `Bearer ${process.env.SCREENSHOT_API_KEY}`
17      }
18    });
19    
20    res.json({ screenshotUrl: response.data.screenshotUrl });
21  } catch (error) {
22    res.status(500).json({ error: 'Failed to generate screenshot' });
23  }
24});
25
26app.listen(3000, () => console.log('Server running on port 3000'));

01import React, { useState } from 'react';
02import { View, Button, Image, TextInput, StyleSheet } from 'react-native';
03
04export default function ScreenshotGenerator() {
05  const [url, setUrl] = useState('');
06  const [screenshotUrl, setScreenshotUrl] = useState(null);
07  const [loading, setLoading] = useState(false);
08
09  const generateScreenshot = async () => {
10    setLoading(true);
11    try {
12      const response = await fetch('https://your-backend.com/generate-screenshot', {
13        method: 'POST',
14        headers: {
15          'Content-Type': 'application/json',
16        },
17        body: JSON.stringify({ url }),
18      });
19      
20      const data = await response.json();
21      setScreenshotUrl(data.screenshotUrl);
22    } catch (error) {
23      console.error('Error generating screenshot:', error);
24    } finally {
25      setLoading(false);
26    }
27  };
28
29  return (
30    <View style={styles.container}>
31      <TextInput
32        style={styles.input}
33        value={url}
34        onChangeText={setUrl}
35        placeholder="Enter website URL"
36      />
37      <Button title={loading ? "Generating..." : "Generate Screenshot"} onPress={generateScreenshot} disabled={loading} />
38      {screenshotUrl && <Image source={{ uri: screenshotUrl }} style={styles.screenshot} />}
39    </View>
40  );
41}
42
43const styles = StyleSheet.create({
44  container: { padding: 20 },
45  input: { height: 40, borderWidth: 1, marginBottom: 12, padding: 8 },
46  screenshot: { width: '100%', height: 300, marginTop: 20 }
47});

01// Request a screenshot with webhook notification
02const response = await fetch('https://api.screenshotapi.com/capture', {
03  method: 'POST',
04  headers: {
05    'Content-Type': 'application/json',
06    'Authorization': 'Bearer YOUR_API_KEY'
07  },
08  body: JSON.stringify({
09    url: 'https://example.com',
10    webhookUrl: 'https://your-app.com/webhook/screenshot-ready'
11  })
12});
13
14// Then handle the webhook
15app.post('/webhook/screenshot-ready', (req, res) => {
16  const { screenshotUrl, metadata } = req.body;
17  // Process the completed screenshot
18  // Store in database, notify user, etc.
19  res.sendStatus(200);
20});