Skip to content

Fix JPG format and base64 preview on web#602

Merged
gre merged 1 commit intomasterfrom
fix/web-jpg-and-base64
Mar 18, 2026
Merged

Fix JPG format and base64 preview on web#602
gre merged 1 commit intomasterfrom
fix/web-jpg-and-base64

Conversation

@gre
Copy link
Copy Markdown
Owner

@gre gre commented Mar 18, 2026

Summary

  • Fix JPG captures silently producing PNG on web: toDataURL("image/jpg") is not a valid MIME type, browsers require "image/jpeg". Now maps "jpg""jpeg" before calling toDataURL.
  • Fix base64 result appearing blank in example: raw base64 was used directly as <Image source={{uri}}>, which doesn't work without the data:image/...;base64, prefix.

Ref #586

Test plan

  • npm run type-check / npm run lint:ci pass
  • Open example-web, test all 4 capture buttons on BasicTestScreen:
    • PNG (Data URI) — works as before
    • JPG (Data URI) — now produces actual JPEG
    • PNG (Base64) — now displays correctly (was blank)
    • JPG (Base64) — now displays correctly (was blank)

🤖 Generated with Claude Code

Two web capture bugs:

1. JPG captures were silently producing PNG because toDataURL("image/jpg")
   is not a valid MIME type — browsers require "image/jpeg". Now maps
   "jpg" to "jpeg" before calling toDataURL.

2. Base64 result was blank in the example because raw base64 was used
   directly as an Image source. Prepend the data URI prefix when
   result is "base64" so it displays correctly.

Ref #586

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Copilot AI review requested due to automatic review settings March 18, 2026 16:00
Copy link
Copy Markdown

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

This PR fixes two web-specific capture/preview issues in react-native-view-shot and its web example: ensuring JPG captures are encoded as real JPEGs (not silently PNG) and ensuring base64 capture results display correctly in the example app.

Changes:

  • Map format: "jpg" to the correct canvas MIME type (image/jpeg) before calling toDataURL on web.
  • Prefix raw base64 capture output with a proper data:image/...;base64, header in example-web so <Image source={{uri}}> renders it.
  • Minor refactor to compute MIME type once before building the data URL / data URI.

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 2 comments.

File Description
src/RNViewShot.web.ts Ensures correct MIME type (image/jpeg) is used for JPG on web canvas exports.
example-web/src/screens/BasicTestScreen.tsx Fixes example preview for base64 results by converting raw base64 into a data URI.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

You can also share your feedback on Copilot code review. Take the survey.

Comment thread example-web/src/screens/BasicTestScreen.tsx
Comment thread src/RNViewShot.web.ts
@gre
Copy link
Copy Markdown
Owner Author

gre commented Mar 18, 2026

tested manually.
waiting for Test Web Example Playwright to succeed.

@gre gre merged commit ef1a07a into master Mar 18, 2026
11 checks passed
@gre gre mentioned this pull request May 2, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants