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

[bug] remote icons do not load in rasterized .png images #5

Open
nberlette opened this issue Sep 12, 2022 · 0 comments
Open

[bug] remote icons do not load in rasterized .png images #5

nberlette opened this issue Sep 12, 2022 · 0 comments
Assignees
Labels
bug Something isn't working help wanted Extra attention is needed

Comments

@nberlette
Copy link
Owner

Describe the Bug

The custom iconUrl parameter appears to be broken. In actuality, it functions fine when rendering an .svg, but displays nothing when requesting the same image as a .png. This is a major problem is PNG is by far the most popular file type.

There's a high likelihood of this being a problem with resvg_wasm rendering foreign objects / external image URLs. Maybe we can bypass this by encoding the image as a base64 datauri?

PR's welcome.

Expected Behavior

Instead of using the standard icon parameter, which is limited to the Iconify syntax of {collection-name}:{icon-identifier}, users are supposed to be able to provide a fully-resolved URL with the iconUrl parameter, overriding the former to display their custom icon instead.

Reproduction

These are the same exact image URL's, except for the extensions - .svg and .png. Notice the .svg renders fine, with the Apple Emoji T-Rex icon displaying as intended.

SVG: https://migo.deno.dev/image.svg?title=deno911%E2%81%84+kit&subtitle=deno+module+starter+template&titleFontFamily=serif&titleFontSize=72&titleFontWeight=900&titleTextAnchor=left&titleX=160&titleY=110&subtitleFontSize=36&subtitleFontWeight=900&subtitleFontFamily=monospace&subtitleTextAnchor=left&subtitleX=40&subtitleY=250&pxRatio=1.5&width=1000&height=300&bgColor=111827&titleColor=fff&subtitleColor=ddd&iconW=100&iconH=100&iconX=40&iconY=30&borderRadius=10&iconUrl=https://emoji.aranja.com/static/emoji-data/img-apple-160/1f996.png

The png, however.... no dice.

PNG: https://migo.deno.dev/image.png?title=deno911%E2%81%84+kit&subtitle=deno+module+starter+template&titleFontFamily=serif&titleFontSize=72&titleFontWeight=900&titleTextAnchor=left&titleX=160&titleY=110&subtitleFontSize=36&subtitleFontWeight=900&subtitleFontFamily=monospace&subtitleTextAnchor=left&subtitleX=40&subtitleY=250&pxRatio=1.5&width=1000&height=300&bgColor=111827&titleColor=fff&subtitleColor=ddd&iconW=100&iconH=100&iconX=40&iconY=30&borderRadius=10&iconUrl=https://emoji.aranja.com/static/emoji-data/img-apple-160/1f996.png

Screenshots

SVG

Screen Shot 2022-09-12 at 1 52 38 PM

PNG

Screen Shot 2022-09-12 at 1 53 00 PM

@nberlette nberlette added bug Something isn't working help wanted Extra attention is needed labels Sep 12, 2022
@nberlette nberlette self-assigned this Sep 12, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working help wanted Extra attention is needed
Projects
None yet
Development

No branches or pull requests

1 participant