Optionally use Data URLs to store generated image

[enrikb]

When playing with asciidoctor-kroki and various combinations of kroki-http-method and kroki-fetch-diagram, I had the idea to use Data URLs for storing the returned image data instead of files or just directly GETable URLs.

It has the advantage of exporting self-contained HTML versions of the documents. However, it does no longer allow caching already rendered diagrams well. (This is not so important for me as I'm using a local kroki server, anyway.)

The following patch contains a very quick'n'dirty proof-of-concept:

diff -ruN src/asciidoctor-kroki.js ../asciidoctor-vscode/node_modules/asciidoctor-kroki/src/asciidoctor-kroki.js
--- src/asciidoctor-kroki.js	2023-01-02 16:13:24.496477117 +0100
+++ ../asciidoctor-vscode/node_modules/asciidoctor-kroki/src/asciidoctor-kroki.js	2023-01-02 14:47:59.258352549 +0100
@@ -46,8 +46,11 @@
 
 const createImageSrc = (doc, krokiDiagram, target, vfs, krokiClient) => {
   const shouldFetch = doc.isAttribute('kroki-fetch-diagram')
+  const useDataURL = doc.isAttribute('kroki-fetch-into-data-url')
   let imageUrl
-  if (shouldFetch && doc.getSafe() < SAFE_MODE_SECURE) {
+  if (useDataURL) {
+    imageUrl = require('./fetch.js').save(krokiDiagram, doc, target, vfs, krokiClient, true)
+  } else if (shouldFetch && doc.getSafe() < SAFE_MODE_SECURE) {
     imageUrl = require('./fetch.js').save(krokiDiagram, doc, target, vfs, krokiClient)
   } else {
     imageUrl = krokiDiagram.getDiagramUri(krokiClient.getServerUrl())
diff -ruN src/fetch.js ../asciidoctor-vscode/node_modules/asciidoctor-kroki/src/fetch.js
--- src/fetch.js	2023-01-02 16:13:24.496477117 +0100
+++ ../asciidoctor-vscode/node_modules/asciidoctor-kroki/src/fetch.js	2023-01-02 14:41:37.114832748 +0100
@@ -21,7 +21,7 @@
   return baseDir
 }
 
-module.exports.save = function (krokiDiagram, doc, target, vfs, krokiClient) {
+module.exports.save = function (krokiDiagram, doc, target, vfs, krokiClient, use_data_url = false) {
   const exists = typeof vfs !== 'undefined' && typeof vfs.exists === 'function' ? vfs.exists : require('./node-fs.js').exists
   const read = typeof vfs !== 'undefined' && typeof vfs.read === 'function' ? vfs.read : require('./node-fs.js').read
   const add = typeof vfs !== 'undefined' && typeof vfs.add === 'function' ? vfs.add : require('./node-fs.js').add
@@ -45,11 +45,15 @@
   }
   // file is either (already) on the file system or we should read it from Kroki
   const contents = exists(filePath) ? read(filePath, encoding) : krokiClient.getImage(krokiDiagram, encoding)
-  add({
-    relative: imagesOutputDirectory,
-    basename: diagramName,
-    mediaType,
-    contents: Buffer.from(contents, encoding)
-  })
-  return diagramName
+  if (use_data_url) {
+    return 'data:' + mediaType + ";base64," + Buffer.from(contents, encoding).toString('base64')
+  } else {
+    add({
+      relative: imagesOutputDirectory,
+      basename: diagramName,
+      mediaType,
+      contents: Buffer.from(contents, encoding)
+    })
+    return diagramName
+  }
 }

[ggrossetie]

There are a few limitations when using data URI:

• Add support for block image target as data URI asciidoctor#3791
• It should be possible to set the contents of an image (bytes) on an Image node asciidoctor#3698
• media_uri should return a data URI as-is without doing any additional processing asciidoctor#3657

But I'm willing to implement this feature. Feel free to submit a pull request.