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

Generates inconsistent text size across different devices #202

Closed
eliasljubec opened this issue Jan 24, 2024 · 5 comments · Fixed by #204
Closed

Generates inconsistent text size across different devices #202

eliasljubec opened this issue Jan 24, 2024 · 5 comments · Fixed by #204
Labels

Comments

@eliasljubec
Copy link

eliasljubec commented Jan 24, 2024

Describe the bug
When generating images with text in them, the size of the text changes depending on what phone you use. I tried generating the same image with text on two different phones - an iPhone SE (3rd Generation) and an iPhone 15 Pro Max. The text turned out to be much bigger on the iPhone 15 Pro Max than on the iPhone SE which is strange, especially considering that the same parameters were used for generating the images.

To Reproduce
Steps to reproduce the behavior:

Following code was used on both devices to generate the images shown below:

const image = await ImageMarker.markText({
    saveFormat: ImageFormat.jpg,
    backgroundImage: {
        src: 'https://images.unsplash.com/photo-1434281406913-47acccb03654?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzMTA3Nzl8MHwxfHJhbmRvbXx8fHx8fHx8fDE3MDYwOTU2ODl8&ixlib=rb-4.0.3&q=80&w=1080',
        scale: 1,
    },
    watermarkTexts: [
        {
            text: 'Duis aute irure dolor in reprehenderit\n in voluptate velit esse cillum valum',
            positionOptions: {
                position: Position.center,
            },
            style: {
                color: '#fbfbfb',
                fontName: 'Arial-BoldMT',
                fontSize: 24,
                shadowStyle: {
                    dx: 3,
                    dy: 3,
                    radius: 6,
                    color: '#0000004f'
                },
                textAlign: 'left',
            }
        }
    ]
});

await MediaLibrary.saveToLibraryAsync(image);

Expected behavior
In this case, I have set specific parameters for how the text should appear on the image, so the result should be consistent/identical regardless which devices was used to generate the image.

Screenshots
iPhone 15 Pro Max
iPhone 15 Pro Max

iPhone SE 3rd Gen
iPhone SE 3gen

Devlopment environment:

  • react-native: 0.72.6
  • react-native-image-marker : 1.2.3

Smartphone:

  • Simulators: iPhone SE 3rd gen, iPhone 15 Pro Max
  • OS: iOS 17.0.1
@JimmyDaddy
Copy link
Owner

Thank you for reporting this issue, I have found the cause of the issue and will fix it shortly.

@JimmyDaddy JimmyDaddy added the bug label Jan 24, 2024
@eliasljubec
Copy link
Author

Thank you, much appreciated!
I also noticed the same issue on android when using a Pixel 4 and a Pixel 4 XL.

JimmyDaddy added a commit that referenced this issue Jan 24, 2024
…es for 1.1.x (#203)

* feat: replace positionOptions to postions

* fix: set the font size without considering the screen density

* ci: update gh actions

* chore: release 1.1.14
JimmyDaddy added a commit that referenced this issue Jan 24, 2024
…es (#204)

* feat: replace positionOptions to postions

* fix: set the font size without considering the screen density

* ci: update gh actions

* chore: release 1.2.4
@JimmyDaddy
Copy link
Owner

v1.2.4 is available

@eliasljubec
Copy link
Author

Thanks @JimmyDaddy works!

@pramahaditamaputra
Copy link

pramahaditamaputra commented May 7, 2024

Hi @JimmyDaddy how to solve this issue for project react native 0.72.x ? currently i'm using v1.1 in OS Android 14 the text size come more bigger
i tried upgrade to v1.2.6 but its give me new error like this #183

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
3 participants