Fix download button not working on Linux browsers#102
Open
labradorite-dev wants to merge 4 commits intoTechForPalestine:mainfrom
Open
Fix download button not working on Linux browsers#102labradorite-dev wants to merge 4 commits intoTechForPalestine:mainfrom
labradorite-dev wants to merge 4 commits intoTechForPalestine:mainfrom
Conversation
Replace html-to-image library with html2canvas to fix compatibility issues with Linux browsers (Firefox, Chromium, GNOME Web). Changes: - Replace toPng from html-to-image with html2canvas - Add image preloading verification before capture - Configure html2canvas with useCORS and allowTaint for cross-origin images - Increase output quality with scale: 2 - Remove hacky workaround of calling generateImage() 4 times - Add proper error handling with user-facing feedback Fixes TechForPalestine#82
Add comprehensive cross-browser testing infrastructure using Playwright to verify the download button works correctly across major browsers. Test coverage: - Chromium (Chrome, Edge, etc.) - Firefox (where the bug was originally reported) - WebKit (Safari) The tests verify: - Download button successfully triggers a download - Downloaded file is a valid PNG image - Proper error handling when no image is uploaded - html2canvas integration works correctly All tests pass across all three browser engines.
Add CI workflow that runs on PRs and pushes to main: - Runs Playwright E2E tests across Chromium, Firefox, and WebKit in parallel - Uploads test reports as artifacts for 30 days when tests fail - Uses efficient dependency caching with npm ci - Ensures all code merged to main is validated and tested This automates cross-browser testing to prevent regressions.
Add documentation for running Playwright tests with instructions for: - Running the full test suite - Running tests in headed mode to watch browsers - Running tests in UI mode for interactive debugging This helps contributors understand how to validate their changes.
labradorite-dev
force-pushed
the
fix/download-button-linux-browsers
branch
from
89768cf to
e51d453
Compare
labradorite-dev
commented
Jan 4, 2026
Comment on lines
+108
to
+112
| const canvas = await html2canvas(ref.current, { | ||
| useCORS: true, | ||
| allowTaint: true, | ||
| scale: 2, | ||
| }); |
Author
There was a problem hiding this comment.
html2canvas Configuration
useCORS: true - Enables Cross-Origin Resource Sharing for loading external images. Critical because profile pictures come from Twitter, GitHub, GitLab, etc. Without this, browsers block cross-origin images.
allowTaint: true - Allows canvas to be "tainted" by cross-origin data. Necessary trade-off since we're only using the image for local download, not sending it anywhere.
scale: 2 - Renders at 2x resolution (e.g., 300x300 → 600x600 PNG) for sharper images on high-DPI displays and social media.
Author
|
@h4p-t4p, can I get a look at this PR? |
|
I can confirm with both GNOME Web and Chromium on GNOME-OS, using a local image, the edited image downloads fine, From my stance, this fixes my original issue 💜 |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Fixes #82 - Download button not working on Linux browsers (Firefox, Chromium, GNOME Web)
This PR replaces the
html-to-imagelibrary withhtml2canvasto fix compatibility issues with Linux browsers and adds comprehensive cross-browser testing.Problem
The
html-to-imagelibrary has well-documented compatibility issues with Firefox and Linux browsers:The current implementation used a workaround of calling
generateImage()4 times, but this still failed for users on Firefox/Chromium/GNOME Web on Linux systems.Solution
Replace
html-to-imagewithhtml2canvas, which was already installed as a project dependency. This avoids adding new dependencies while solving the compatibility issues.Changes Made
1. Fixed Download Functionality (src/app/page.tsx)
html-to-image(toPng) withhtml2canvas(already in package.json)useCORS: true- enables cross-origin image handlingallowTaint: true- allows cross-origin imagesscale: 2- increases output qualitygenerateImage()4 times2. Added Playwright E2E Tests
3. Added GitHub Actions CI
4. Updated Documentation
Test Results
All 9 tests pass across all three browser engines ✅
Test Plan
Technical Details
Since
html2canvaswas already listed in package.json as a dependency, we leveraged it instead of adding a new library. With proper CORS configuration (useCORSandallowTaint), the download feature now works reliably across all platforms and browsers, eliminating the Firefox and Linux compatibility issues present inhtml-to-image.