Incorporer l'image en Base64 lors de l'exportation HTML depuis Orgmode

8

L'objectif est de créer un fichier html autonome lors de l'exportation depuis orgmode afin que les images soient intrinsèques au fichier et qu'un seul fichier html puisse être distribué (j'essaie de le faire pour une classe que j'enseigne et que je veux donner aux étudiants un seul html qu'ils peuvent ouvrir dans un navigateur).

J'ai trouvé un extrait de code en ligne qui donne l'idée de ce que je veux:

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

Et j'essaie de l'intégrer dans elisp et de supprimer ainsi la dépendance vis-à-vis de python et comme une étape vers la création de ma propre fonction elisp qui pourrait avoir plus de détails.

Voici à quoi je suis arrivé. Des conseils appréciés.

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

et où tob64est

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

Cela ne donne pas la mise en forme et les citations correctes.

Le but à atteindre est une variante de l' org-html-export-to-htmlendroit où la fonction elisp pourrait vivre et être invoquée lorsqu'une option comme #+OPTIONS: embed-images-on-html-export:tétait invoquée.

Et en passant, pourquoi la fonctionnalité d'export au format HTML avec des images intégrées n'existe-t-elle pas déjà en mode org? Y a-t-il un problème plus important qui rend cela problématique pour moi de travailler?

org-mode images html brittAnderson
la source

Réponses:

3

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

Vous pouvez également trouver ceci: https://github.com/KitchinHUB/kitchingroup-66/blob/master/manuscript.org#the-custom-export-code-labelexport-code une façon intéressante d'encoder des données base64 en html.

Votre code fonctionne pour moi:

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

sort une image encodée en base64 que je peux voir dans l'exportation.

Pour que cela fonctionne automatiquement lors de l'exportation, vous souhaiterez probablement utiliser une fonction dans org-export-before-processing-hook qui passera par et remplacera vos liens de fichiers par un bloc html contenant la sortie d'une fonction comme celle ci-dessus.

John Kitchin
la source
Merci de prendre le temps. Le problème pour moi, c'est que j'ai continué à essayer printou insert. Va maintenant lire format. Difficile de savoir quoi chercher quand on ne connaît pas le nom des choses. Explorera vos conseils sur l'utilisation du crochet. Cela ne ressemble-t-il pas à quelque chose qui en vaut la peine?
brittAnderson
Ce serait une bonne façon de créer un fichier html autonome qui pourrait être envoyé par e-mail ou simplement transféré.
John Kitchin
2

À partir du fil 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
la source
1

Comme alternative, vous pouvez utiliser le package ox-pandoc . Pandoc lui-même a une option de ligne de commande appelée --self-Contenu qui incorporera des images en HTML.

Pour vous utilisez cela uniquement pour l'exportateur pandoc HTML5, en le mettant dans votre .emacs:

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

En outre, vous pouvez également l'avoir pour html4:

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

Ou pour utiliser - autonome pour tout pandoc:

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

Notez que la (standalone . t)partie est facultative, je l'inclus uniquement car cela reproduit ensuite les valeurs par défaut de pandoc. Vous pouvez le supprimer si vous le souhaitez ou le remplacer par votre propre ensemble d'options.

Enfin, vous pouvez faire la même chose pour un seul fichier en utilisant l'en-tête:

#+PANDOC_OPTIONS: self-contained:t

marque
la source