Display website JS source code on HTML background with only front-end code

Question

How can I display the current front-end JS source code (1 file) on the HTML as some sort of background? I am currently displaying a static image of my code as the background, but this must be updated manually each time the code changes, which isn't good. The JS source code is pretty short - around 50 lines.

EDIT: Also, I don't need the code to be actually an image. For example, it could just be text on a div. But if I'm just displaying the text, it must not mess up the flow of the document (I need to be able to display other elements on top).

It's not clear what you want to do. Can you give an example? — Aron, Jul 17 '17 at 14:26
Do you have access to server side programming or can this be a build time task? i.e. could you run a file when you build your site? — Mauro, Jul 17 '17 at 14:30

score 3 · Accepted Answer · answered Jul 17 '17 at 14:38

3

You can request local resource using XMLHttpRequest() or fetch(), use <canvas> to set words of script to canvas, call .toDataURL() on canvas, set resulting data URL as background of specific element.

answered Jul 17 '17 at 14:38

guest271314

1
15
104
177

G-Cyrillus · Answer 2 · 2017-07-17T18:10:32.667

2

There might be an unexpected way to show your scripts via display:

https://codepen.io/gc-nomade/pen/jwRgNO

// some text to display from a script tag

head, script {
  display:block;
}

<script>// some text to display from a script tag within the <body> tag</script>
<p> here goes some regular content</p>

then, position can be used to take it off the flow of the document

If the js is linked, see comments below

edited Jul 17 '17 at 18:10

answered Jul 17 '17 at 14:35

G-Cyrillus

101,410
14
105
129

how can this work if the script tag links to a js file? – frozen Jul 17 '17 at 15:26
@frozen it cannot work in that case, you might give a try to the iframe or object tag ... https://codepen.io/gc-nomade/pen/QgRbLp again something unexpected :) Best is anyway to use a library on server side to produce a jpeg file . PhP would do that and it would also be able to update the image produce every time that the timestamp of js file is updated .. – G-Cyrillus Jul 17 '17 at 18:08

score 0 · Answer 3 · answered Jul 17 '17 at 14:33

If you have access to server side code execution you could use a process similar to this How to generate an image from text on fly at runtime which lets you generate an image from text

private Image DrawText(String text, Font font, Color textColor, Color backColor)
{
    //first, create a dummy bitmap just to get a graphics object
    Image img = new Bitmap(1, 1);
    Graphics drawing = Graphics.FromImage(img);

    //measure the string to see how big the image needs to be
    SizeF textSize = drawing.MeasureString(text, font);

    //free up the dummy image and old graphics object
    img.Dispose();
    drawing.Dispose();

    //create a new image of the right size
    img = new Bitmap((int) textSize.Width, (int)textSize.Height);

    drawing = Graphics.FromImage(img);

    //paint the background
    drawing.Clear(backColor);

    //create a brush for the text
    Brush textBrush = new SolidBrush(textColor);

    drawing.DrawString(text, font, textBrush, 0, 0);

    drawing.Save();

    textBrush.Dispose();
    drawing.Dispose();

    return img;

}

Alternatively if you can't execute code server side you could maybe use ImageMagick as described here (http://www.imagemagick.org/discourse-server/viewtopic.php?t=15869)

convert -size 250x250 -fill black -font Helvetica caption:@text.txt text.gif

Where text.txt is your source file and text.gif is the output file. The rest is pretty self explanatory.

score 0 · Answer 4 · answered Jul 17 '17 at 15:58

If you do not need an actual image, you can fetch your code and wrap it in <pre><code></code></pre>. Then set it to a lower z-index than your main content.

<pre style="position:absolute; z-index:1; pointer-events:none;"><code></code></pre>
<div style="position:relative; z-index:2;"></div>
<script>
  fetch('/yourscript.js').then(response=>response.text()).then(text=>{
     document.querySelector('code').innerText = text;
  });
<script>

You would need to stylize it as needed, eg setting width/height, font-size

If you want to be able to use it as an actual background, then you would need to use <svg> with the use of <foreignObject>. After which you can use to create object urls.

Fetch your code
Build the correct svg XML, inserting your code into the correct place, eg inside a <pre> tag within <foreignObject>.
Then using that xml create a blob with mime type image/svg+xml
Finally create an object url from that blob. The url then can be used in place of an actual image url.

fetch('/yourscript.js').then(response=>response.text()).then(text=>{
   var data = `<svg xmlns="http://www.w3.org/2000/svg" width="800" height="500">
                 <foreignObject width="100%" height="100%">
                    <pre xmlns="http://www.w3.org/1999/xhtml">
                      <code>${text}</code>
                    </pre>
                 </foreignObject>
           </svg>`;
   var svg = new Blob([data], {type: 'image/svg+xml'});
   var url = window.URL.createObjectURL(svg);
   document.body.style.backgroundImage = `url(${url})`;
});

Note the width/height attributes of the <svg>, anything drawn outside of those dimensions will not be seen, so use the appropriate values for your targets.

And if you wanted an actual image file you could just then use that object url as the src for an Image, draw it on a <canvas> and call toDataURL

For the actual text highlighting (like that in your example image) you would need to do extra work, like wrapping the correct text in styled elements before using it.

Display website JS source code on HTML background with only front-end code

4 Answers4