現在のフロントエンドのJSソースコード（1ファイル）をバックグラウンドとしてHTMLに表示するにはどうすればよいですか？私は現在、私のコードの静的なイメージをバックグラウンドとして表示していますが、コードが変更されるたびに手動で更新する必要があります。 JSソースコードはかなり短く、約50行です。ウェブサイトを表示フロントエンドコードのみのHTML背景にJSソースコード
編集： また、コードは実際にはイメージである必要はありません。たとえば、divのテキストにすることができます。しかし、テキストを表示しているだけであれば、ドキュメントの流れを乱してはいけません（他の要素を上に表示できる必要があります）。
あなたは、XMLHttpRequest()またはfetch()を使用してローカルリソースを要求canvasにスクリプトの言葉を設定する<canvas>を使用し、canvasに.toDataURL()を呼び出すことができ、特定の要素のbackgroundとしてdata URLを結果セット。
サーバーサイドコードの実行へのアクセス権を持っている場合、あなたはあなたが多分できたコード・サーバー・サイドを実行できない場合は、
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;
}
代わりにテキストから画像を生成することができます。このHow to generate an image from text on fly at runtimeと同様のプロセスを使用することができますここで説明したようTEXT.TXTは、ソースファイルとtext.gifは、出力ファイルである
convert -size 250x250 -fill black -font Helvetica caption:@text.txt text.gif
に
（ http://www.imagemagick.org/discourse-server/viewtopic.php?t=15869）のImageMagickを使用しています。残りはかなり自己説明的です。ディスプレイを介して、あなたのスクリプトを表示する予期しない方法があるかもしれません：
https://codepen.io/gc-nomade/pen/jwRgNO
// some text to display from a script taghead, 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がリンクされている場合、下記のコメントを参照してください
スクリプトタグがjsファイルにリンクしている場合、どうすればこのことができますか？ – frozen
@frozenその場合は動作しません、iframeまたはobjectタグに試してみてください... https://codepen.io/gc-nomade/pen/QgRbLpもう一度予期しない:)とにかくjpegファイルを生成するサーバー側のライブラリ。 PhPはそれを行い、jsファイルのタイムスタンプが更新されるたびに、画像生成を更新することもできます。 –
実際のイメージが必要ない場合は、コードを取得して<pre><code></code></pre>にラップすることができます。次に、メインのコンテンツよりも低いZインデックスに設定します。
<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>
あなたは、実際の背景としてそれを使用することができるようにしたい場合は、あなたが必要になりますあなたはそれを型にはめる必要があるだろう
<foreignObject>を使用して<svg>を使用してください。その後、オブジェクトURLの作成に使用できます。
<foreignObject>内<pre>タグ内に例えば正しい場所、にあなたのコードを挿入し、正しいSVGのXMLを作成してコードimage/svg+xmlfetch('/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ように、そのオブジェクトのURLを使用<canvas>でそれを描き、実際のテキストの強調表示についてtoDataURL
を呼び出すことができます（あなたの例のイメージでは）、あなたはそれを使用する前に、書式設定された要素に正しいテキストをラップするような余分な作業をする必要があります。
あなたのやりたいことははっきりしません。あなたは例を挙げることができますか？ – Aron
サーバーサイドプログラミングにアクセスできますか、これはビルドタイムタスクですか？つまり、サイトを構築するときにファイルを実行できますか？ – Mauro
@Mauroいいえ、フロントエンドのhtml/cssを持っている – frozen