Incrustar imagen como Base64 en la exportación HTML desde Orgmode

8

El objetivo es hacer un archivo html autónomo al exportar desde orgmode para que las imágenes sean intrínsecas al archivo y se pueda distribuir un solo archivo html (estoy tratando de hacer esto para una clase que enseño y quiero darles a los estudiantes un solo html que pueden abrir en un navegador).

Encontré un fragmento de código en línea que da la idea de lo que quiero:

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

Y estoy tratando de ponerlo en elisp y así eliminar la dependencia de Python y como un paso para crear mi propia función de elisp que podría tener más detalles.

Esto es lo que he llegado a hacer. Consejos apreciados.

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

y donde tob64esta

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

Esto no da el formato y las citas correctas.

El objetivo para trabajar es alguna variante de org-html-export-to-htmldónde podría vivir la función elisp y ser invocada cuando se invocó una opción como #+OPTIONS: embed-images-on-html-export:t.

Y además, ¿por qué la funcionalidad de exportar a html con imágenes incrustadas ya no existe en modo org? ¿Hay algún problema mayor que haga que esto sea problemático para mí?

org-mode images html

— brittAnderson
fuente

3

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

También puede encontrar esto: https://github.com/KitchinHUB/kitchingroup-66/blob/master/manuscript.org#the-custom-export-code-labelexport-code, una forma interesante de codificar datos base64 en html.

Tu código funciona para mí:

#+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 una imagen codificada en base64 que puedo ver en la exportación.

Para que esto funcione automáticamente en la exportación, probablemente desee utilizar una función en org-export-before-processing-hook que revisará y reemplazará los enlaces de sus archivos con un bloque html que contenga la salida de una función como la anterior.

— John Kitchin
fuente

Gracias por tomarse el tiempo. El problema para mí era que seguía intentando printo insert. Ahora leerá sobre format. Es difícil saber qué buscar cuando no conoce los nombres de las cosas. Explorará sus consejos sobre el uso del gancho. ¿No suena esto como algo que vale la pena tener?

— brittAnderson

Sería una buena manera de crear un archivo html independiente que podría enviarse por correo electrónico o simplemente transferirse.

— John Kitchin,

2

Del hilo de 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
fuente

1

Como alternativa, puede usar el paquete ox-pandoc . Pandoc tiene una opción de línea de comando llamada - autónoma que incrustará imágenes en html.

Para usar esto solo para el exportador de pandoc HTML5, poniéndolo en su .emacs:

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

Además, podría tenerlo para html4 en su lugar / también:

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

O para usar - autónomo para todos los pandoc:

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

Tenga en cuenta que la (standalone . t)parte es opcional, incluyo solo porque esto replica los valores predeterminados que tiene pandoc. Puede eliminarlo si lo desea, o reemplazarlo con su propio conjunto de opciones.

Finalmente, puede hacer lo mismo para un solo archivo utilizando el encabezado:

#+PANDOC_OPTIONS: self-contained:t

— marca
fuente