Honor png/webp alpha channel on image preview

[diegodorado]

yazi --debug output

Yazi
    Version: 0.3.0 (Nixpkgs 2024-08-01)
    Debug  : false
    OS     : linux-x86_64 (unix)

Ya
    Version: 0.3.0

Emulator
    Emulator.via_env: ("xterm-256color", "WezTerm")
    Emulator.via_csi: Ok(WezTerm)
    Emulator.detect : WezTerm

Adapter
    Adapter.matches: Iterm2

Desktop
    XDG_SESSION_TYPE: Some("wayland")
    WAYLAND_DISPLAY : Some("wayland-1")
    DISPLAY         : Some(":0")

SSH
    shared.in_ssh_connection: false

WSL
    /proc/sys/fs/binfmt_misc/WSLInterop: false

Variables
    SHELL              : Some("/bin/zsh")
    EDITOR             : Some("nvim")
    YAZI_FILE_ONE      : None
    YAZI_CONFIG_HOME   : None
    ZELLIJ_SESSION_NAME: None

Text Opener
    default: Some(Opener { run: "${EDITOR:=vi} \"$@\"", block: true, orphan: false, desc: "$EDITOR", for_: None, spread: true })
    block  : Some(Opener { run: "${EDITOR:=vi} \"$@\"", block: true, orphan: false, desc: "$EDITOR", for_: None, spread: true })

tmux
    TMUX   : false
    Version: No such file or directory (os error 2)

Dependencies
    file             : 5.45
    ueberzugpp       : No such file or directory (os error 2)
    ffmpegthumbnailer: 2.2.2
    magick           : 7.1.1-36
    fzf              : 0.54.3
    fd               : 10.1.0
    rg               : 14.1.0
    chafa            : 1.14.2
    zoxide           : 0.9.4
    7z               : 17.05
    7zz              : 24.07
    jq               : 1.7.1

--------------------------------------------------
When reporting a bug, please also upload the `yazi.log` log file - only upload the most recent content by time.
You can find it in the "/home/diegodorado/.local/state/yazi" directory.

Please describe the problem you're trying to solve

THe image previewer is not displaying the image with transparent background. I know my terminal would be capable of doing it because lsix works fine for this.

Would you be willing to contribute this feature?

• [X] Yes, I'll give it a shot

Describe the solution you'd like

Look at lsix implementation to see how they do it.

Additional context

No response

Validations

• [X] I have searched the existing issues
• [X] The latest nightly build of Yazi doesn't already have this feature

[sxyazi]

Hi, it's already on the feature request list, but I haven't had the time to implement it yet. It's not a high priority, but I'd be happy to accept any constructive patches. Would you like to give it a try? I can offer some guidance.

[diegodorado]

haven't done much rust but I am interested, sure!, if you point me on where to make the changes, i can try it this weekend

[sxyazi]

The image preview is done through the image previewer, which relies on two APIs: ya.image_show() and ya.image_precache():

https://github.com/sxyazi/yazi/blob/0f106b591c7be48508821313a6b2a9566f8dca62/yazi-plugin/preset/plugins/image.lua#L10

https://github.com/sxyazi/yazi/blob/0f106b591c7be48508821313a6b2a9566f8dca62/yazi-plugin/preset/plugins/image.lua#L22

And the source of them at:

https://github.com/sxyazi/yazi/blob/0f106b591c7be48508821313a6b2a9566f8dca62/yazi-plugin/src/utils/image.rs#L9-L25

I think this is a great place to start.

[diegodorado]

@sxyazi , I got this working, would you give it a review?

https://github.com/sxyazi/yazi/pull/1556

[diegodorado]

did you get a chance to check my implementation @sxyazi ? fine if you haven't had time, I ask just in case you missed this

[sxyazi]

Thanks, it looks good to me overall. I'll need some more time to test it further - we need to make sure that all 4 image backends (Sixel, Kitty, IIP, and Ueberzug) handle transparent backgrounds correctly.

[sxyazi]

Done in https://github.com/sxyazi/yazi/pull/1556, thanks for contributing this feature! @diegodorado

[github-actions[bot]]

I'm going to lock this issue because it has been closed for 30 days. ⏳ This helps our maintainers find and focus on the active issues. If you have found a problem that seems similar to this, please open a new issue and complete the issue template so we can capture all the details necessary to investigate further.