Incorpora immagine come Base64 nell'esportazione HTML da Orgmode

8

L'obiettivo è creare un file html autonomo quando si esporta da orgmode in modo che le immagini siano intrinseche al file e che sia possibile distribuire un singolo file html (sto cercando di farlo per una classe che insegno e voglio dare agli studenti un singolo HTML che possono aprire in un browser).

Ho trovato uno snippet di codice online che dà l'idea di ciò che voglio:

#+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

E sto provando a metterlo in elisp e quindi rimuovere la dipendenza da python e come passo per creare la mia funzione elisp che potrebbe avere qualche dettaglio in più.

Ecco cosa ho avuto. Consiglio apprezzato.

#+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

e dove tob64è

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

Ciò non fornisce la formattazione e le quotazioni corrette.

L'obiettivo su cui lavorare è una variante di org-html-export-to-htmldove la funzione elisp potrebbe vivere e essere invocata quando è #+OPTIONS: embed-images-on-html-export:tstata invocata un'opzione simile .

E a parte questo, perché la funzionalità di esportazione in HTML con immagini incorporate non esiste già in modalità organizzazione? C'è qualche problema più grande che rende questo problematico a cui sto lavorando?

org-mode images html

— brittAnderson
fonte

3

Vedi http://kitchingroup.cheme.cmu.edu/blog/2015/05/09/Another-approach-to-embedding-org-source-in-html/ .

Puoi anche trovare questo: https://github.com/KitchinHUB/kitchingroup-66/blob/master/manuscript.org#the-custom-export-code-labelexport-code un modo interessante per codificare i dati base64 in html.

Il tuo codice funziona per me:

#+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

genera un'immagine codificata in base64 che posso vedere nell'esportazione.

Per farlo funzionare automaticamente nell'esportazione, probabilmente si desidera utilizzare una funzione in org-export-before-processing-hook che passerà attraverso e sostituirà i collegamenti dei file con un blocco html contenente l'output di una funzione come quella sopra.

— John Kitchin
fonte

Grazie per aver dedicato del tempo. Il problema per me era che continuavo a provare printo insert. Ora continuerò a leggere format. Difficile sapere cosa cercare quando non si conoscono i nomi delle cose. Esplorerai i tuoi consigli sull'uso del gancio. Non sembra qualcosa che vale la pena avere però?

— brittAnderson

Sarebbe un buon modo per creare un file html autonomo che potrebbe essere inviato via email o semplicemente trasferito.

— John Kitchin,

2

Dal thread reddit https://www.reddit.com/r/orgmode/comments/7dyywu/creating_a_selfcontained_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))))

— Sainath Adapa
fonte

1

In alternativa, è possibile utilizzare il pacchetto ox-pandoc . Pandoc stesso ha un'opzione da riga di comando chiamata - stessi-contenuta che incorporerà le immagini in HTML.

Per utilizzarlo solo per l'esportatore HTML5 pandoc, inserendolo nel tuo .emacs:

(setq org-pandoc-options-for-html5 '((standalone . t) (self-contained . t)))

Inoltre, potresti averlo per html4 invece / pure:

(setq org-pandoc-options-for-html5 '((standalone . t) (self-contained . t)))

O da usare autonomamente per tutti i pandoc:

(setq org-pandoc-options '((standalone . t) (self-contained . t)))

Si noti che la (standalone . t)parte è facoltativa, includo solo perché questo replica quindi le impostazioni predefinite di PandC. Se lo desideri, puoi rimuoverlo o sostituirlo con il tuo set di opzioni.

Infine, puoi fare la stessa cosa per un singolo file usando l'intestazione:

#+PANDOC_OPTIONS: self-contained:t

— marchio
fonte