Save as Image Button for Your Website

<!-- Button shown on your page -->
<button class="pdfcrowd-websave pdfcrowd-websave-style"
        data-key="demo"
        data-config="webSaveConfig">
  Save as Image
</button>

<!-- Required image settings -->
<script>
window.webSaveConfig = {
  apiSettings: {
    output_format: 'png'
  }
};
</script>

<!-- Load WebSave once, after the button and configuration -->
<script src="https://edge.pdfcrowd.com/websave/1.3.0/websave.min.js" async></script>

<!-- Button with content mode configuration -->
<button class="pdfcrowd-websave pdfcrowd-websave-style"
        data-key="demo"
        data-config="webSaveConfig">
  Save as Image
</button>

<script>
window.webSaveConfig = {
  // Enable content mode to capture current DOM state
  conversionMode: "content",
  apiSettings: {
    output_format: 'png',
  }
};
</script>

<script src="https://edge.pdfcrowd.com/websave/1.3.0/websave.min.js" async></script>

<!-- No pdfcrowd-websave-style class - use your own CSS -->
<button class="pdfcrowd-websave my-custom-button"
        data-key="demo"
        data-config="webSaveConfig">
  Save As Image
</button>

<!-- Customization configuration -->
<script>
window.webSaveConfig = {
  fileAction: 'download',  // or 'open', 'openNewTab'
  fileName: () => 'screenshot-' + new Date().toISOString().split('T')[0] + '.jpg',     
  
  // Image conversion settings
  apiSettings: {
    output_format: 'jpg',     // JPEG format
    screenshot_width: 1600,   // Width in pixels
    jpeg_quality: 85          // Quality (1-100)
  }
};
</script>

<!-- Custom CSS for the button -->
<style>
.my-custom-button {
  background: #007bff;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
.my-custom-button:hover {
  background: #0056b3;
}
.my-custom-button:disabled {
  opacity: 0.6;
  cursor: wait;
}
</style>

<script src="https://edge.pdfcrowd.com/websave/1.3.0/websave.min.js" async></script>

<button class="pdfcrowd-websave pdfcrowd-websave-style"
        data-key="demo"
        data-config="webSaveConfig">
  Save as Image
</button>

<!-- Method Selection Guide:
   - URL parameters: Best when server has print-specific templates
   - Print stylesheets: Quick option if @media print CSS exists
   - Custom CSS: Flexible styling without modifying HTML
   - JavaScript: Dynamic content manipulation
   - pdfcrowd-remove class: Simple for removing static elements -->

<script>
window.webSaveConfig = {

  // Method 1: URL parameters, adds ?print=1 (URL mode only)
  onBeforeConversion: function(config) {
    if (config.conversionMode === 'url') {
      const url = new URL(config.url);
      url.searchParams.set('print', '1');
      config.url = url.toString();
    }
    return false; // Proceed with conversion
  },
  
  apiSettings: {
    // Method 2: Print stylesheets
    // use_print_media: true,
    
    // Method 3: Custom CSS injection
    custom_css: `
      /* Hide elements in screenshot */
      .advertisement, .sidebar, footer { 
        display: none !important; 
      }
      /* Adjust layout for cleaner capture */
      .content { 
        width: 100% !important; 
        max-width: none !important; 
      }
    `,
    
    // Method 4: JavaScript preprocessing
    custom_javascript: `
      // Remove dynamic content before conversion
      document.querySelectorAll('.video-player, .chat-widget').forEach(el => {
        el.remove();
      });
      // Expand collapsed sections
      document.querySelectorAll('.collapsed').forEach(el => {
        el.classList.remove('collapsed');
      });
    `,

    output_format: 'png'      
  }
};

</script>

<!-- Method 5: Use pdfcrowd-remove class directly in HTML
     Add this class to elements in your actual page content: -->
<nav class="pdfcrowd-remove">
  This navigation won't appear in the screenshot
</nav>

<script src="https://edge.pdfcrowd.com/websave/1.3.0/websave.min.js" async></script>

<!-- Advanced customization with callbacks -->
<button class="pdfcrowd-websave pdfcrowd-websave-style"
        data-key="demo"
        data-config="webSaveConfig">
  Save as Image
</button>

<script>
// Application-specific hooks. Replace these with your own UI, analytics,
// and permission checks:
// - showCustomErrorModal(message, code) - your error UI
// - trackEvent(name, data) - your analytics
// - userIsLoggedIn() - your auth check

window.webSaveConfig = {

  // Custom error handling
  onError: function(errorMessage, statusCode) {
    console.error('WebSave error:', errorMessage, 'Code:', statusCode);
    
    // Display your own error UI instead of default dialog
    showCustomErrorModal(errorMessage, statusCode);
    
    return true; // Return true to prevent default error dialog
  },
  
  // Track successful conversions
  onFileCreated: function(blob) {
    // Log success for analytics
    trackEvent('image_generated', {
      size: blob.size,
      page: window.location.pathname
    });
    
    return false; // Return false to let WebSave handle download
  },
  
  // Pre-conversion validation (optional)
  onBeforeConversion: function(config) {
    // Validate or modify before conversion starts
    // Example: Check if user is logged in
    if (!userIsLoggedIn()) {
       alert('Please log in to download image');
       return true; // Cancel conversion
    }

    return false; // Proceed with conversion
  },

  // Image generation settings
  apiSettings: {
    output_format: 'png'
  }
};
</script>

<script src="https://edge.pdfcrowd.com/websave/1.3.0/websave.min.js" async></script>