Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

toDataUrl() function outputs base64 string w/ newlines #183

Open
go-sean-go opened this issue Jun 15, 2023 · 1 comment
Open

toDataUrl() function outputs base64 string w/ newlines #183

go-sean-go opened this issue Jun 15, 2023 · 1 comment

Comments

@go-sean-go
Copy link

base64 images with newlines will not work in some situations (many? most? all?), e.g. the React Native Share() library won't accept it properly as a url param.

FAILURE CASE

      <QRCode
        getRef={c => {
          if (!c?.toDataURL) return;
          c?.toDataURL((base64Image: string) => {
            base64QrCodeRef.current = base64Image;
          });
        }}
        value={url}
        logo={logoUri}
        size={QR_CODE_SIZE}
        logoSize={QR_CODE_SIZE * 0.38}
        ecl="H"
      />

SUCCESS CASE
via react-native-share/react-native-share#1393 (comment)

      <QRCode
        getRef={c => {
          if (!c?.toDataURL) return;
          c?.toDataURL((base64Image: string) => {
            // must strip whitespace due to 'bug' in QR code library
            // see https://github.com/react-native-share/react-native-share/issues/1393#issuecomment-1568365217
            base64QrCodeRef.current = base64Image.replace(/(\r\n|\n|\r)/gm, '');
          });
        }}
        {...rest}
      />

Proposed fix:
Strip newlines from base64 output, i.e. append .replace(/(\r\n|\n|\r)/gm, '') to the return value of toDataURL().

@hryjosn
Copy link

hryjosn commented Sep 14, 2023

I had the same issue.
@go-sean-go Thanks for saving my day!

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

No branches or pull requests

2 participants