在 HTML 背景上显示网站 JS 源代码，只有前端代码答案

【问题标题】：Display website JS source code on HTML background with only front-end code在 HTML 背景上显示网站 JS 源代码，只有前端代码
【发布时间】：2017-12-22 03:28:53
【问题描述】：

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

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

【问题讨论】：

不清楚你想做什么。能举个例子吗？
您是否可以访问服务器端编程，或者这可以是构建时的任务吗？即，您可以在构建站点时运行文件吗？
@Mauro 不，我只有前端 html/css

标签： javascript html css

【解决方案1】：

如果您有权访问服务器端代码执行，则可以使用类似于 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 是输出文件。其余的很容易解释。

【讨论】：

【解决方案2】：

可能有一种意想不到的方式通过显示来显示您的脚本：

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>

那么，可以使用位置将其从文档流中移除

如果js是链接的，见下面的cmets

【讨论】：

如果脚本标签链接到一个 js 文件，这将如何工作？
@frozen 在这种情况下它无法工作，您可以尝试 iframe 或对象标签 ...codepen.io/gc-nomade/pen/QgRbLp 再次出乎意料 :) 无论如何最好在服务器端使用库来生成一个 jpeg 文件。 PhP 会做到这一点，它还能够在每次更新 js 文件的时间戳时更新图像生成..

【解决方案3】：

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

【讨论】：

【解决方案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，将您的代码插入正确的位置，例如在<foreignObject> 内的<pre> 标记内。
然后使用该 xml 创建一个 mime 类型为 image/svg+xml 的 blob
最后从该 blob 创建一个对象 url。然后可以使用该 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> 的宽度/高度属性，在这些尺寸之外绘制的任何内容都不会被看到，因此请为您的目标使用适当的值。

如果您想要一个实际的图像文件，您可以使用该对象 url 作为 Image 的 src，将其绘制在 <canvas> 上并调用 toDataURL

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

【讨论】：