Hello World

Image Slicing

#emacs
#project

Table of Contents

概述

在 Emacs 图片的展示逻辑与文本是一样的，占用一行。如果图片很高，它会调整当前行高适配图片。这种情况导致在 Emacs 当中滚动图片的体验相当糟糕。

尽管，在一些场景下，pixel-scroll 和 iscroll 已经提升了图片滚动的体验。但我仍旧希望能有一种方式，让图片功能和文本滚动有同样的使用感受。

因此我创建了这个包，把图片水平切割为多个部分，每张图片占用一行，连续拼接在一起。这样滚动图片和移动文本基本就是一样的。

在开发的过程, 我发现了一个包： org-sliced-images ，它的思路和我想的基本一致。但提到了一个我不知道的方法 insert-sliced-image, 我参考了 insert-sliced-image 的实现。

前提

CLI

Curl: 使用 Curl 异步下载 web 图片，如果没有 web 图片则不需要。

需要的 Emacs 包

  • org-element: 用于解析 Buffer 里的所有链接。
  • image: 用于创建 Image 对象。
  • url-util : 用于处理 URL 格式的工具。

安装 Image-slicing

  • 克隆 Image-slicing 项目到你自己的 Emacs 配置目录下：
git clone [email protected]:ginqi7/image-slicing.git ~/.emacs.d/lisp/image-slicing
  • 把克隆的路径添加到 load-path 当中
(add-to-list 'load-path (expand-file-name "~/.emacs.d/lisp/d/lisp/image-slicing"))

配置

(require 'image-slicing)

变量

变量 默认值 解释
image-slicing-download-concurrency 20 下载网络图片的最大并发数
image-slicing-line-height-scale 2 图片切片占用几个行高
image-slicing-max-width 700 图片的最大宽度
image-slicing-cursor-fringe-bitmaps '(left-fringe right-arrow warning) 当前指针位置的边缘指示符样式 1

Eww 配置

  1. 取消 EWW 默认的图片渲染方法
(add-to-list 'shr-external-rendering-functions
             '(img . image-slicing-tag-img))
  1. 把 image-slicing 添加到 eww-after-render-hook
(push #'image-slicing-mode eww-after-render-hook)

Elfeed 配置

;; add to shr-external-rendering-functions (skip if alread setup for eww)
(add-to-list 'shr-external-rendering-functions
             '(img . image-slicing-tag-img))
             
;; advice `elfeed-show-entry' to trigger `image-slicing-mode'
(advice-add #'elfeed-show-entry :after #'image-slicing-mode)

特性

  • image-slicing-mode: 自动解析 buffer 中的图片链接，并用多行的形式渲染。
  • Asynchronous: 异步下载 Web 图片。
  • Multiple Modes: 支持多种模式的 buffer 例如：org-mode, eww, elfeed.

支持的链接格式

  • Org 格式的链接
    • [[url][tag]]
    • [[url]]
  • 常见格式的链接
    • file:./hello.png
    • http://image.png
  • eww html 链接
    • <img src=''>
    • 支持 base64 格式的图片

例子

缺点

  • 如果有许多的网络图片，它会生成需要的临时文件，在系统的临时目录下。
  • 如果 URL 链接太短，图片的切片数目会比较少，那么单个切片的行高会比较高。
  • 一次只有一个 buffer 能够被渲染。

Todo List

  • 适配 nov

开发历史

Dec 18, 2024

我发现了一个类似的包 org-sliced-images, 我从中学习到了一些代码，使我的代码更加简洁：

在 Emacs 当中，我们能够展示一张图片的一部分： ('display . (list (list 'slice x y dx dy) image)) ，这样就不需要使用 ImageMagick 去真实的分割图片。

Dec 16, 2024

上一个版本存在一些问题：

  1. ImageMagick 解析网络图片会比较满。
  2. 尽管删除这些 overlay 的时候，我会删除那些占位符，但是它仍然有污染用户 buffer 的可能性。

因此我尝试使用异步进程去运行 ImageMagick, 保证不会卡住 Emacs, 另一方面我移除了占位符，而是直接在原始的 URL 上添加 overlay.

May 12, 2023

想到一个有趣的想法：把图片切片，通过 overlays 一行一行的展示，来提高图片滚动的体验。

第一版的实现逻辑：

  1. 使用命令行工具 ImageMagick 真实地切割图片；
  2. 插入一些特殊的文本 "#_#_@@_#_#" 作为占位符，然后通过在占位符上添加 overlay 来展示图片；

Footnotes:

1

Emacs Fringe Bitmaps

  • Next: dictionary-overlay