terminal image display #5264
-
Details
Maybe I'm using it wrong. |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment 5 replies
-
|
@naiheyoung This sequence cannot be used to load an image from an url, the image data has to come as base64 in the sequence. Also see the sequence spec here https://iterm2.com/documentation-images.html. |
Beta Was this translation helpful? Give feedback.
-
|
Thank you for your answer.
term.write(`\x1b]1337;File=inline=1:${target?.result}\x1b]1337;FileEnd`)Does xterm integrate iterm2 related syntax by default or must it be installed additionally? |
Beta Was this translation helpful? Give feedback.
-
|
You need the image addon for this to work. Also the sequence must contain the correct size parameter (original bytes, not the base64 length). |
Beta Was this translation helpful? Give feedback.
-
|
Of course. I used the import { ITerminalOptions, ITerminalInitOnlyOptions, Terminal } from '@xterm/xterm'
import { ImageAddon } from '@xterm/addon-image'
const term = new Terminal()
term.loadAddon(new ImageAddon())I tried some parameters on the plugin documentation but still can't get what I want. term.write(`\x1b]1337;File=inline=1:<base64 data>\x1b]1337;FileEnd`)
/*
I converted the image to base64 format and spliced it into the output statement
because I saw you mentioned above that the image needs to appear in base64 format
*/Maybe I should choose another way to implement this function...😵💫 |
Beta Was this translation helpful? Give feedback.
-
|
Here an REPL demo, where you can enter image URLs, which then get printed to the terminal with the IIP sequence: <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>terminal test</title>
<link rel="stylesheet" href="node_modules/@xterm/xterm/css/xterm.css">
<script src="node_modules/@xterm/xterm/lib/xterm.js"></script>
<script src="node_modules/@xterm/addon-image/lib/addon-image.js"></script>
</head>
<body>
<div id="terminal"></div>
<button id="image-demo1">kitty</button>
<button id="image-demo2">puppy</button>
<script>
const term = new Terminal();
const imageAddon = new ImageAddon.ImageAddon();
term.loadAddon(imageAddon);
term.open(document.getElementById('terminal'));
function iip(data) {
let bstr = '';
for (let i = 0; i < data.length; ++i) bstr += String.fromCharCode(data[i]);
return `\x1b]1337;File=inline=1;size=${bstr.length};width=80%:${btoa(bstr)}\x1b\\`;
}
// tiny in-browser image url REPL
// This is normally done by the PTY backend with a shell.
term.write('fetch> ');
let buf = [];
const repl = async data => {
for (let i = 0; i < data.length; ++i) {
const c = data[i];
if (c === '\r') {
term.write('\r\n');
if (buf.length) {
const url = buf.join('');
buf.length = 0;
try {
const resp = await fetch(url);
const buffer = await resp.arrayBuffer();
term.write(iip(new Uint8Array(buffer)));
} catch (e) {
const msg = !e ? 'Unknown Error...' : e.message || e;
term.write(`\x1b[31m${msg.replace('\n', '\r\n')}\x1b[m`);
}
term.write('\r\n');
}
term.write('fetch> ');
} else {
buf.push(c);
term.write(c);
}
}
};
term.onData(repl);
// 2 image examples
document.getElementById('image-demo1').addEventListener('click',
() => repl('https://1.bp.blogspot.com/-X4gdAhZ8Ggo/T5KX-zqqf1I/AAAAAAAAARg/C2kgWP0ZFP0/s1600/Cat-Desktop-Wallpaper-2.jpg\r'));
document.getElementById('image-demo2').addEventListener('click',
() => repl('http://images6.fanpop.com/image/photos/34200000/Puppy-dogs-34212464-1440-900.jpg\r'));
</script>
</body>
</html> |
Beta Was this translation helpful? Give feedback.
-
|
Ok, thank you! |
Beta Was this translation helpful? Give feedback.
@naiheyoung This sequence cannot be used to load an image from an url, the image data has to come as base64 in the sequence. Also see the sequence spec here https://iterm2.com/documentation-images.html.