Nhúng hình ảnh như Base64 khi xuất HTML từ Orgmode


8

Mục tiêu là tạo một tệp html độc lập khi xuất từ ​​orgmode để các hình ảnh là nội tại của tệp và một tệp html sẽ có thể được phân phối (Tôi đang cố gắng làm điều này cho một lớp tôi dạy và muốn cung cấp cho sinh viên một html duy nhất họ có thể mở trong trình duyệt).

Tôi tìm thấy một đoạn mã trên dòng đưa ra ý tưởng về những gì tôi muốn:

#+BEGIN_SRC python :results output html :exports results
with open('/home/britt/Pictures/Britt0001.jpg', 'rb') as image:
    data = image.read()
    print '<img src="data:image/jpg;base64,%s">' % data.encode("base64")
#+END_SRC

Và tôi đang cố gắng đưa nó vào elisp và do đó loại bỏ sự phụ thuộc vào python và như một bước để tạo ra chức năng elisp của riêng tôi có thể có một số chi tiết hơn.

Đây là những gì tôi đã nhận được. Tư vấn đánh giá cao.

#+BEGIN_src elisp :results output html :exports results
    (setq myim (concat "<img src=\\"data:image/jpg;base64," (tob64 "/home/britt/Pictures/Britt0001.jpg") ">"))
     (print myim)
#+END_SRC

và ở đâu tob64

(defun tob64 (filename)
  (base64-encode-string
   (with-temp-buffer
     (insert-file-contents filename)
     (buffer-string))))

Điều này không cung cấp định dạng và trích dẫn chính xác.

Mục tiêu cần thực hiện là một số biến thể trong org-html-export-to-htmlđó hàm elisp có thể sống và được gọi khi một tùy chọn như #+OPTIONS: embed-images-on-html-export:tđược gọi.

Và như một bên, tại sao chức năng xuất ra html với hình ảnh nhúng không tồn tại trong chế độ org? Có một số vấn đề lớn hơn làm cho vấn đề này đối với tôi để làm việc hướng tới?

Câu trả lời:


3

Xem http://kitchingroup.cheme.cmu.edu/blog/2015/05/09/Anther-approach-to-embpping-org-source-in-html/ .

Bạn cũng có thể tìm thấy điều này: https://github.com/KitchinHUB/kitchingroup-66/blob/master/manuscript.org#the-custom-export-code-labelexport-code một cách thú vị để mã hóa dữ liệu cơ sở64 trong html.

Mã của bạn hoạt động với tôi:

#+BEGIN_SRC emacs-lisp :results html :exports both
(defun tob64 (filename)
  (base64-encode-string
   (with-temp-buffer
     (insert-file-contents filename)
     (buffer-string))))

(format "<img src=\"data:image/png;base64,%s\">"
    (tob64 "/Users/jkitchin/t.png"))
#+END_SRC

xuất ra một hình ảnh được mã hóa base64 mà tôi có thể thấy trong xuất.

Để làm cho điều này hoạt động tự động trong xuất, có lẽ bạn muốn sử dụng một hàm trong org-export-before-process-hook sẽ đi qua và thay thế các liên kết tệp của bạn bằng một khối html chứa đầu ra của hàm như ở trên.


Cảm ơn đã dành thời gian. Vấn đề đối với tôi là tôi tiếp tục cố gắng printhoặc insert. Bây giờ sẽ đọc lên trên format. Khó biết phải tìm gì khi bạn không biết tên của sự vật. Sẽ khám phá lời khuyên của bạn về việc sử dụng móc. Điều này không giống như một cái gì đó có giá trị mặc dù?
brittAnderson

Sẽ là một cách hay để tạo một tệp html độc lập có thể được gửi qua email hoặc đơn giản là chuyển.
John Kitchin

2

Từ chuỗi reddit https://www.reddit.com/r/orgmode/comments/7dyywu/creating_a_elfcontained_html/

(defun replace-in-string (what with in)
  (replace-regexp-in-string (regexp-quote what) with in nil 'literal))

(defun org-html--format-image (source attributes info)
  (progn
    (setq source (replace-in-string "%20" " " source))
    (format "<img src=\"data:image/%s;base64,%s\"%s />"
            (or (file-name-extension source) "")
            (base64-encode-string
             (with-temp-buffer
               (insert-file-contents-literally source)
              (buffer-string)))
            (file-name-nondirectory source))))
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.