Screenshot capture not working

Annotatr captures screenshots when creating notes to provide visual context. If screenshots aren’t generating, aren’t displaying correctly, or appear blank, this guide will help you diagnose and resolve the issue.

Most screenshot problems stem from browser compatibility, cross-origin content restrictions, or page complexity. Following these troubleshooting steps will resolve the vast majority of issues.

How Annotatr captures screenshots

Annotatr offers two screenshot methods:

Standard capture (default)

Uses html2canvas to read your page’s DOM and recreate it as an image. This works in most situations but may have limitations with complex elements.

Native capture (recommended)

Uses your browser’s built-in screenshot API for more accurate captures. This produces higher-quality screenshots and handles complex elements better.

Common causes and solutions

1. Cross-origin images (CORS)

Problem: Images loaded from external domains (CDNs, external media libraries) may not render in screenshots.

Why it happens: Browsers block access to cross-origin images for security reasons.

Solution:

1. Switch to Native Capture mode—this bypasses CORS restrictions
2. Alternatively, Annotatr includes a built-in image proxy
3. If issues persist, configure CORS headers on your CDN
4. Or host critical images on the same domain

2. Browser compatibility

Problem: Older browsers may not support modern screenshot features.

Minimum requirements:

• Chrome/Edge 90+
• Firefox 88+
• Safari 14+

Solution: Update your browser to the latest version.

3. Privacy or ad-blocking extensions

Problem: Browser extensions may block screenshot operations or JavaScript libraries.

Solution:

1. Temporarily disable browser extensions
2. Test screenshot capture again
3. If successful, re-enable extensions one by one to identify the culprit
4. Add your WordPress site to the extension’s whitelist

4. Complex page elements

Problem: Some elements are difficult to capture with standard methods.

Affected elements:

• Embedded iframes (YouTube, Google Maps)
• SVG graphics with external references
• Elements with complex CSS filters or transforms
• Canvas-based animations or graphics

Solution:

• Use Native Capture mode—handles these elements much better
• Capture the surrounding container instead of the specific element
• Use the global area selector to select a broader region

5. Very large or complex pages

Problem: Extremely large pages may be slow to capture or fail entirely.

Solution:

• Use the “Select area” feature to capture specific sections
• Capture individual elements rather than full-page sections
• Switch to Native Capture for better performance

Using native capture for best results

Native Capture uses your browser’s built-in screenshot functionality and produces more accurate results:

Advantages of native capture:

• More accurate representation of what you see
• Better handling of iframes, videos, and embedded content
• Faster capture on complex pages
• No CORS restrictions
• Better colour accuracy and rendering

How to enable native capture:

1. Click “Add Note” to enter note-taking mode
2. Look for the capture mode toggle
3. Select Native Capture
4. Click the element you want to capture, and allow you to crop the view
5. The browser will capture exactly what’s displayed

Alternative: Manual screenshot upload

If automatic capture isn’t working, you can manually capture and upload screenshots:

Browser screenshot shortcuts:

• Windows: Win + Shift + S (Snipping Tool)
• Mac: Cmd + Shift + 4 (drag to select area)
• Chrome DevTools: Cmd/Ctrl + Shift + P → “Capture node screenshot”

Upload to Annotatr:

1. Create a note without automatic screenshot (click “Skip screenshot”)
2. Save the note
3. Edit the note and upload your manually captured screenshot

Checking for errors

If screenshots consistently fail, check your browser console:

1. Press F12 to open developer tools
2. Click the Console tab
3. Look for errors when attempting to capture
4. Note any messages mentioning “canvas”, “CORS”, or “tainted”
5. Share error messages with support if needed

Server-side upload issues

Sometimes screenshots capture successfully but fail to upload:

File upload limits:

Ensure your WordPress site allows sufficient file uploads:

• upload_max_filesize: 10MB minimum (recommended: 25MB)
• post_max_size: 12MB minimum (recommended: 30MB)
• memory_limit: 256MB minimum (recommended: 512MB)

Check these values in WordPress → Site Health → Info → Server.

Permissions:

Verify WordPress can write to the uploads directory:

• Navigate to wp-content/uploads/
• Ensure folder permissions are set to 755 or 775
• Test by uploading a standard image through WordPress Media Library

Quick troubleshooting checklist

Work through these steps in order:

1. Try switching to Native Capture mode
2. Update your browser to the latest version
3. Temporarily disable browser extensions
4. Try capturing a smaller area or single element
5. Check browser console for error messages
6. Verify upload limits in WordPress Site Health
7. Test with a simple page first

Still having issues?

If screenshots still aren’t working after trying Native Capture mode and these troubleshooting steps, you can always create notes with manual screenshots or even without screenshots.

The note system works perfectly well with just descriptions and element selectors—screenshots are helpful visual aids but not strictly required.