如何实现HTML转图片并定时更新以展示资产价格？

Absolutely, this is totally doable—here's a practical, step-by-step approach that fits your constraints perfectly:

Core Idea #

Since your target site can't run JavaScript, we can't trigger refreshes on the frontend. Instead, we'll generate updated price images on your own server on a schedule, then have the target site reference this static image URL. Browser caching rules will handle automatically pulling the latest version.

Step-by-Step Implementation #

1. Node.js + Puppeteer (Most Popular Approach) #

Puppeteer is Chrome's official headless browser tool, perfect for rendering HTML to images reliably.

• First, set up a Node.js project on your server and install dependencies:

  npm install puppeteer node-schedule
  

• Next, write a script to render your price HTML to an image (e.g., generate-price-image.js):

  const puppeteer = require('puppeteer');
  const fs = require('fs');
  
  async function generateImage() {
    // Fetch latest price data from your source API
    const priceData = await fetch('https://your-data-source.com/prices')
      .then(res => res.json())
      .catch(err => {
        console.error('Failed to fetch price data:', err);
        return { btc: 'N/A', eth: 'N/A' }; // Fallback values
      });
  
    // Build your HTML template with dynamic price data
    const htmlContent = `
      <html>
        <body style="font-family: 'Arial', sans-serif; padding: 20px; background: #f5f5f5;">
          <h2 style="margin-top: 0; color: #333;">Real-Time Asset Prices</h2>
          <div style="margin: 15px 0; font-size: 1.2rem;">
            <span style="font-weight: bold;">Bitcoin:</span> $${priceData.btc}
          </div>
          <div style="font-size: 1.2rem;">
            <span style="font-weight: bold;">Ethereum:</span> $${priceData.eth}
          </div>
        </body>
      </html>
    `;
  
    // Launch headless Chrome and render the image
    const browser = await puppeteer.launch({ headless: 'new' });
    const page = await browser.newPage();
    await page.setContent(htmlContent);
    await page.setViewport({ width: 600, height: 300 }); // Set your desired image size
    // Save the image to a fixed path (served as static content later)
    await page.screenshot({ path: './public/price-chart.jpg', type: 'jpeg', quality: 90 });
    
    await browser.close();
    console.log(`Image updated at ${new Date().toISOString()}`);
  }
  
  module.exports = generateImage;
  

• Add a scheduler to run the script on your desired interval (e.g., every 30 seconds):

  const schedule = require('node-schedule');
  const generateImage = require('./generate-price-image');
  
  // Run every 30 seconds (adjust the cron expression for 1-minute intervals: '*/1 * * * *')
  schedule.scheduleJob('*/30 * * * * *', () => {
    generateImage().catch(err => console.error('Image generation failed:', err));
  });
  
  console.log('Price image scheduler started');
  

• Host the public/ directory (where the image is saved) as static content using Nginx, Express, or any static file server. Now you can access the image at https://your-domain.com/price-chart.jpg.

2. Critical: Cache Strategy for Auto-Updates #

Since the target site can't use JS to refresh the image, we need to tweak browser caching to ensure it pulls the latest version:

• Best Approach: Configure your server to send cache headers that force the browser to check for updates every time. For Nginx, add this to your config:

  location /price-chart.jpg {
    add_header Cache-Control "no-cache, must-revalidate";
    expires -1;
  }
  

  This way, the browser will always ask your server if the image has changed. If it has, it downloads the new version; if not, it uses the cached copy (saving bandwidth).

3. Alternative: Python + Playwright #

If you prefer Python, use Playwright (a cross-browser headless tool) instead:

• Install dependencies:

  pip install playwright python-dotenv apscheduler
  playwright install chromium
  

• Write a similar script to fetch prices, render HTML, and save the image, then use APScheduler to run it on your desired schedule. The end result is identical—you'll still host the image as static content.

4. Deployment Tips #

• Use Docker to package your script and dependencies (e.g., a Puppeteer/Playwright base image) to avoid environment setup headaches.
• Add logging and error alerts (e.g., send an email if the script fails repeatedly) to ensure your price images stay up-to-date.
• Test the interval to make sure your server can handle the load—30-second intervals are manageable as long as image generation is fast (which it should be with headless browsers).

内容的提问来源于stack exchange，提问作者user9181167