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?

• 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

• I have searched the existing issues
• 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():

yazi/yazi-plugin/preset/plugins/image.lua

Line 10 in 0f106b5

ya.image_show(url, self.area)

yazi/yazi-plugin/preset/plugins/image.lua

Line 22 in 0f106b5

return ya.image_precache(self.file.url, cache) and 1 or 2

And the source of them at:

yazi/yazi-plugin/src/utils/image.rs

Lines 9 to 25 in 0f106b5

	ya.raw_set(
	"image_show",
	lua.create_async_function(|lua, (url, rect): (UrlRef, RectRef)| async move {
	if let Ok(area) = ADAPTOR.image_show(&url, *rect).await {
	Rect::cast(lua, area)?.into_lua_multi(lua)
	} else {
	Value::Nil.into_lua_multi(lua)
	}
	})?,
	)?;
	ya.raw_set(
	"image_precache",
	lua.create_async_function(|_, (src, dist): (UrlRef, UrlRef)| async move {
	Ok(Image::precache(&src, dist.to_path_buf()).await.is_ok())
	})?,
	)?;

I think this is a great place to start.

[diegodorado]

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

#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 #1556, thanks for contributing this feature! @diegodorado

[github-actions]

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.