RenderSnap Documentation

Learn how to use our HTML to Image conversion service

Documentation

Quick Start

RenderSnap is a powerful HTML to Image conversion service that allows you to convert any HTML content into high-quality images. Here's how to get started:

1. Get an API Key

Before using the RenderSnap API, you need to register and obtain an API key.

2. Send API Request

Send a request to our API using your programming language of choice. Here's a basic example:


// 使用 fetch API 调用 RenderSnap 服务
async function convertHtmlToImage(htmlContent, options = {}) {
  const apiKey = 'YOUR_API_KEY'; // 替换为您的 API 密钥

  const response = await fetch('https://rendersnap.xyz/api/html-to-image', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'Authorization': `Bearer ${apiKey}`
    },
    body: JSON.stringify({
      html: htmlContent,
      width: options.width || 800,
      height: options.height || 600,
      format: options.format || 'png'
    })
  });

  if (!response.ok) {
    throw new Error(`转换失败: ${response.status} ${response.statusText}`);
  }

  const result = await response.json();
  return result.imageUrl;
}

// 使用示例
const html = `
<!DOCTYPE html>
<html>
<head>
  <style>
    body { font-family: Arial; padding: 20px; }
    h1 { color: #0066cc; }
  </style>
</head>
<body>
  <h1>Hello from RenderSnap!</h1>
  <p>This HTML will be converted to an image.</p>
</body>
</html>
`;

convertHtmlToImage(html, { format: 'png', width: 800, height: 600 })
  .then(imageUrl => {
    console.log('生成的图片 URL:', imageUrl);
    // 在这里使用生成的图片 URL
  })
  .catch(error => {
    console.error('错误:', error);
  });

3. Use the Generated Image

The API response will include the URL of the generated image. You can display this image in your application or download it for further processing.