emacs-eaf/eaf-image-viewer

Dynanmic image viewer

eaf-image-viewer's Issues

svg 内嵌的本地图片无法显示

今天在尝试 https://github.com/misohena/el-easydraw 在 Emacs 上画 svg 文件。它支持 import 本地图片，然后继续画线等等操作。

我有个 demo.edraw.svg（后缀 edraw.svg 是 el-easydraw 约定的，但其实还是 svg）。

它的 text 内容：

<svg width="560" height="420" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink"><rect x="0" y="0" width="560" height="420" id="edraw-background" stroke="none" fill="#fff" /><g id="edraw-body"><image x="11.75" y="52.75" width="543.5" height="305.5" xlink:href="/Users/c/Library/Mobile Documents/iCloud~com~appsonthemove~beorg/Documents/braindump/notes/static/STM32 入门/2024-03-07_01-11-54_screenshot.jpg" transform="matrix(0,-1,1,0,78,489)" /><rect stroke-width="2" stroke="#fd0202" fill="rgba(248,248,248,0)" x="260" y="180" width="60" height="60" /></g></svg>

可以看到其中 xlink:href="/Users/c/Library/Mobile Documents/iCloud~com~appsonthemove~beorg/Documents/braindump/notes/static/STM32 入门/2024-03-07_01-11-54_screenshot.jpg 就是内嵌的本地图片。

• 我期待 eaf-image-viewer 的正常表现如其他
  在 Emacs org-mode 中，显示正常，在本地文件夹预览，显示正常，在 Chrome 浏览器，显示正常。

如下图所示：

• 故障现象

在 eaf-image-viewer 中，只能显示我画的线，内嵌的本体图片没有正常显示

如下图所示：

• 排查对比 eaf-image-viewer 和 Chrome elements 元素
  如下图所示：

• 我的猜想

是不是因为在 eaf-image-viewer 中 Sources 只加载了要预览的 svg 自身资源，svg 内嵌的图片资源没有加载？

在 eaf-image-viewer 的 Python 代码中：

    def load_image(self, url):
        self.url = url
        self.parent_dir = os.path.abspath(os.path.join(url, os.pardir))
        self.image_name = os.path.basename(url)

        load_image_js = "document.getElementById('image').setAttribute('src', '{0}?{1}');viewer.update();".format(
            os.path.join("file://", self.url).replace("\\", "/"),
            random.randint(1, 100000))

        self.buffer_widget.eval_js(load_image_js)

对于 svg ，确实只是传入 svg 本身 url，对于 svg 内嵌的图片没有被加载。

这个不知道是不是原因？后续如何解决？

Some functions I use to rotate and persist the image via ImageMagick's convert

I just wanted to share this, in case it might be useful, as it certainly is to me!

It uses convert from ImageMagick.

(defun dima-image-by-convert (file-name degrees-string)
  "Rotate FILE-NAME with the passed DEGREES-STRING.

Note that the file is changed on the file-system."
  ;; redisplay to show the \"Rotating...\" message
  (redisplay)
  (shell-command
   (format "convert '%s' -quality 100 -rotate %s '%s'"
           file-name
           degrees-string
           file-name)))

(defun dima-eaf-image-viewer-rotate-right ()
  (interactive)
  (message "Rotating...")
  (eaf-execute-app-cmd #'eaf-js-proxy-js_rotate_right)
  (let ((degrees "+90"))
    (dima-image-by-convert (eaf-get-path-or-url) degrees)
    (message "Rotated %s and saved to file system" degrees)))

(defun dima-eaf-image-viewer-rotate-left ()
  (interactive)
  (message "Rotating...")
  (eaf-execute-app-cmd #'eaf-js-proxy-js_rotate_left)
  (let ((degrees "-90"))
    (dima-image-by-convert (eaf-get-path-or-url) degrees)
    (message "Rotated %s and saved to file system" degrees)))

(defun dima-eaf-image-viewer-rotate-180 ()
  (interactive)
  (message "Rotating...")
  (eaf-execute-app-cmd #'eaf-js-proxy-js_rotate_right)
  (eaf-execute-app-cmd #'eaf-js-proxy-js_rotate_right)
  (let ((degrees "-180"))
    (dima-image-by-convert (eaf-get-path-or-url) degrees)
    (message "Rotated %s and saved to file system" degrees)))

dima-image-by-convert is made synchronously so only one image rotation process is run at the time so they don't collide should one spam the keys.

I have also bound those in transient:

(transient-define-prefix dima-transient-eaf-image-viewer ()
  [:class dima-transient-columns
   ["Actions"
    ("r" dima-eaf-image-viewer-rotate-right
     :description "Rotate right and save")
    ("g" dima-eaf-image-viewer-rotate-left
     :description "Rotate left and save")
    ("f" dima-eaf-image-viewer-rotate-180
     :description "Rotate 180 degrees and save")]])

Here is a video (note that I also customized the image-viewer UI a little bit):

Untitled.mov