Question - replace line of text with HTML element

[x1unix]

Hello.

I have a question about one case that I need to implement.

Imagine having a terminal output like this:

First line
IMAGE:iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAAIGNIUk0AAHomAACAhAAA+gAAAIDoAAB1MAAA6mAAADqYAAAXcJy6UTwAAAJ5UExURQAAAFVVVTdOUjhPVDhPVDhOVDhOVDhOVDhOVDdOVDZPVACAgDlPVDhOVThOVQAAADlNUzhOUzhOUzhNUwAAADhOVDhOVDhOVDhNVDlMVDhOVDhPVDlOVThOVDhPVTdOVThNUzhPVDhOVDhOVThOVTlQVzlOVDlSVzhOVDlPVDdPVThOVDhOVDhOUzhOVDhOVDtXX0+EkluhtGe91G3N53HW8XTe+kdyflugsk1+jD9faF+swHTc+Xbh/nTc+D9fZztVXVWSo1eZqj5dZUBia3Xd+WKzyU6Dknnb9bTv/t33/+X5/9L1/6Dq/nfh/qPr/sfz/8z0/7Pu/oDj/nPZ9VSRoW7P6XPb93DS7WnD20l2gnPY81ONnVKOnXPa9oTj/er6/////8v0/4Hj/uD4//b9/5rp/nbg/me+1lGJmFmfsWa70nbf/Hbg/dn3//j9/4bl/lSRok6BkGzJ4pfo/vX19V9cWyomJXl3dvH7/pPn/tLS0UA9OzEuLLKwsMLy/2jA2EVteGO1ypiWlhcTEcHAwIfl/rHu/lNQTyQgHtz0+2/Q65qYl8PCwVRRUCUhH931/G/Q6pXo/vb29mNhXy4qKH99e+/7/pHn/tXU1ERBQDYyMbW0s8Hx/974/3aXoDRHTDVLUZqts/f9/4Xk/oTk/uj6/////r3KzCMgHyooJ9fe3fT9/5jo/nvi/uP5/8/1/7WpoMOMdIViU0k5M0w8NZBqWbK0sMPy/8nz/6/u/n/j/nnc+MCNdrePfHXe+2CaqXyTlLeflMGmmsKnm7Cck3qTll+fsHPc+GvM5urw8f/8+9fl6WrK5M3h5rza4mXB2lywxmjG3/ZbgioAAAAvdFJOUwADQZK83u7x4489ArnKaQJZ39xWAVvDwElD/OPc/lfB1uD1u9D+VfT4Z6+x2tnzxnWgGwAAAAFiS0dEYbKwTIYAAAAHdElNRQfoAQ4FKQJH/1HgAAABn0lEQVQ4y2NgIBYwMjGzsLKx6euzs3GwcHJxI2S4eFh5+fgFBPVRgJCwiKiYoLgEA4OkFIgvra9vYGhkbGJqZmZqYmxkaKCvLwMSl5VjkNc3t7DU17eytrFFAnbW9voOjk7O+goMii5mrrZu7h6eXt4+vmBJP/+AwKDgkNCw8IhIfSUG5ajomNi4+IREEEjys7VNTgGxUtPSMzKzQvRVGCRVsyNycsGCQBBka5sHYeUX2NqGF+rLMTCoqRcVl4CESsvKKyr9qkDM6praunrbhkYNTZA/tfSbPEGizS0tLa1t7SBmR0tLZ5etm742OCB09LuDQKI9QAW9BWAFfS0t/RNsJ+rrghXo6dtNAolOnjJ12nS/GSDmzFmz58y1tdPXAyvQ17e1nQd15PwFCxdBWIuX2Nrq68MVLF0GEly+YuXKlatWg5hr1tqiKLBd1563fsPGTZu3bN22afuOnbt226IpAIE9ezeBwT5YgKMr2H/g4KHDR44eO45Lge2Jk6dOnz5z9gROBba2506fPo/gYVFw4eLFS3gVoIJRBXRVAAB7igNecqLzQAAAACV0RVh0ZGF0ZTpjcmVhdGUAMjAyNC0wMS0xNFQwNTo0MTowMiswMDowMAHjSOgAAAAldEVYdGRhdGU6bW9kaWZ5ADIwMjQtMDEtMTRUMDU6NDE6MDIrMDA6MDBwvvBUAAAAKHRFWHRkYXRlOnRpbWVzdGFtcAAyMDI0LTAxLTE0VDA1OjQxOjAyKzAwOjAwJ6vRiwAAAABJRU5ErkJggg==
Second line

All lines starting with IMAGE: contain base64 encoded image.
I need to replace those lines with actual images inside the terminal:

<img src="[data](data:image/png;base64,[the base64]" />

I tried to take a look at image addon which is used for iTerm protocol but the code there seems to me like rocket science.

Can someone please suggest to me some good points on how to implement this and where to start?
Thank you.

[jerch]

The question is whether those images should be shown inline in the terminal, or elsewhere on the html page.

For inline output with intact buffer scrolling the easiest way is prolly to replace your base64 lines with inline image protocol sequences (iTerm's image sequence) and use the image addon, it will automatically show the images inlined at the position of the sequence. For how to shape the sequence, see the protocol spec here https://iterm2.com/documentation-images.html.

For elsewhere on the html page, do the following:

• grab line content, identify base64 image part
• create new Image and set src attribute to your base64 string
• append image to your DOM container elsewhere

[x1unix]

@jerch thank you very much for the reply, probably I'll do the way you said :)

[x1unix]

@jerch I tried to load the image addon and output a simple png image encoded in iTerm2 protocol.

I tested the same sequence in the real iTerm2 terminal and with xterm.js. I don't know why, but image that works in iTerm, doesn't work in xterm.js

iTerm2:

XTerm

Online demo: CodeSandbox

Image sequence:

"\u001b]1337;File=;inline=1:iVBORw0KGgoAAAANSUhEUgAAABAAAAAPBAMAAAAfXVIcAAAAD1BMVEV63/39//w5TVIZFhXDjXbHNiz1AAAARUlEQVR4nJTJUQ3AIAwG4aMzsBYD9FdQEfjXtJBiYPf0JYeHJKUTC8CShYNjaMwas4xoJNHrgKdo7H0x3ovTP3wBAAD//9u1Bcrd6KY0AAAAAElFTkSuQmCC\u0007\n"

[jerch]

For the image addon the size parameter is needed, it uses it for a sanity check. With that your sequence works:

The protocol is indeed not clear about that, but states, that

The file transfer will be canceled if this size is exceeded.

With strict interpretation this means, that by giving no size the image would have no size. Seems iTerm deviates here from its own spec.

[x1unix]

@jerch thank you very much for help