Question

如何在HTML上显示当前的前端JS源代码（1个文件）作为某种背景？我目前正在显示我的代码的静态图像作为背景，但每次代码更改时都必须手动更新，这是不好的。 JS源代码很短 - 大约50行。

编辑：此外，我不需要代码实际上是一个图像。例如，它可能只是div上的文本。但是，如果我只是显示文本，它一定不会弄乱文档的流程（我需要能够在顶部显示其他元素）。

Answer 1

您可以使用XMLHttpRequest()或fetch()请求本地资源，使用<canvas>将脚本字词设置为canvas，在.toDataURL()上调用canvas }，将结果data URL设置为特定元素的background。

Answer 2

可能会有一种意外的方式通过显示来显示您的脚本：

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

＆＃13;

// some text to display from a script tag

＆＃13;

head, script {
  display:block;
}

＆＃13;

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

＆＃13;

然后，可以使用位置将其从文档流中取消

如果链接了js，请参阅下面的评论

Answer 3

如果您有权访问服务器端代码，则可以使用类似于此How to generate an image from text on fly at runtime的过程，该过程允许您从文本生成图像

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;

}

或者，如果您不能执行代码服务器端，您可以使用此处所述的ImageMagick（http://www.imagemagick.org/discourse-server/viewtopic.php?t=15869）

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

其中text.txt是您的源文件，text.gif是输出文件。其余的都是非常自我解释的。

Answer 4

如果您不需要实际图像，可以获取代码并将其包装在<pre><code></code></pre>中。然后将其设置为比主要内容更低的z-index。

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

您需要根据需要对其进行样式化，例如设置宽度/高度，字体大小

如果您希望能够将其用作实际背景，那么您需要使用<svg>并使用<foreignObject>。之后您可以使用它来创建对象URL。

获取您的代码
构建正确的svg XML，将代码插入正确的位置，例如<pre>内的<foreignObject>标记内。
然后使用该xml创建一个mime类型为image/svg+xml
最后从该blob创建一个对象网址。然后可以使用该URL代替实际的图像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})`;
});

请注意<svg>的宽度/高度属性，不会看到在这些尺寸之外绘制的任何内容，因此请为目标使用适当的值。

如果您想要一个实际的图片文件，那么您可以将该对象网址用作Image的src，在<canvas>上绘制并调用toDataURL

对于实际的文本突出显示（如示例图像中的那样），您需要做额外的工作，比如在使用之前将正确的文本包装在样式元素中。

在HTML背景上显示网站JS源代码，仅显示前端代码

4 个答案: