スクリプトにフラスコパラメータを知らせる方法は？

Question

私はFlaskサーバーを使用しています。いくつかのテンプレートは独自のJavaScriptスクリプトを使用しています。 これらのスクリプトの1つは、ページにsvgを生成します。この機能は、サーバーによって生成された画像を必要とします。

テンプレート（myTemplate.html）：

{% extends "layout.html" %} 
{% block body %} 
    <div id="graph"> 
     <img src="/picture/{{ datasetName }}"></img> 
    </div> 
    <script src="script.js"></script> 
{% endblock %} 

ジャバスクリプト（script.js）：

var graph = d3.select("#graph"); 
var svg = graph.append("svg") //this generates a <svg> in the <div>, it's d3js syntax. 
     .attr("width",window.innerWidth) 
     .attr("height",window.innerHeight) 
     .append("g"); 

フラスコサーバ（ここ

は今のところ存在するものの簡易版でありますserver.py）：

from flask import * 

@app.route('/', methods=['GET']) 
def foo(): 
    return render_template('myTemplate.html') 

@app.route('/picture/<datasetName>', methods=['GET']) 
def picture(datasetName): 
    img = (...) #some function to get my picture 
    return send_file(img.to_bytesio(), mimetype='image/svg', cache_timeout=0) 

私の問題は、javascriptで画像を使用できるようにすることです（svgをナビゲートするときに移動するsvgの背景として設定する）が、現在はそれを取得するためのクリーンな方法はありません。私はスクリプトをHTMLページに移すことができましたが、私のプロジェクトはかなり大きく、私はそれを避けたいと思います。

進歩するためのクリーンな方法は何でしょうか？

Answer 1

ロードされたイメージを生成されたイメージの背景として取得する最も簡単な方法は、CSSオーバーレイを使用することです。 HTML構造や描画ルーチンをほとんど変更する必要はありません。

CSSは次のようになり：

#graph { 位置：相対。今 }

#graph * { 
    position: absolute; 
    top: 0px; 
    left: 0px; 
} 

互いにdiv#graphオーバーレイのすべて。

2番目の方法は、<div>またはその<svg>のCSS background-imageの一部であることです。 CSSには背景画像のサポートがあり、ストレッチ、トランケート、タイリングのオプションがあります。チュートリアルis here。

最後のオプションは、より多くの手術を必要とします。

1. あなたのD3コードをお持ちの<img ...>タグ
2. を削除image要素を生成します。 docs are here。

<image xlink:href="/picture/..." x="0" y="0" 
    height="150" width="250" /> 

これは実現可能であるが、私はそれをお勧めしません。 CSSは、SVGよりもサイジング、位置決め、タイリングのコントロールが優れています。ブラウザのページ全体に対してイメージの幅や高さなど、イメージパラメータは明示的に指定する必要があるため、それらを知っているか計算しておく必要があります。 datasetNameの値はあなたのテンプレートからあなたのJSに通信するという問題があります。だから... CSSオプションの1つに固執する。理想的には最初のものです。

Answer 2

は、あなたは、クライアント側を実行するクライアント側のスクリプトタグを生成するには、次

{% extends "layout.html" %} 
{% block body %} 
    <div id="graph"> 
     <img src="/picture/{{ datasetName }}"></img> 
    </div> 
    <script> 
     var imagePath = '/picture/{{ datasetName }}'; 
    </script> 
    <script src="script.js"></script> 
{% endblock %} 

のようなもの基本的にサーバー側を使用することができ、あなたのクライアント側スクリプトから使用可能な変数imagePathを与えるだろう。

P.S.ちょうどあなたがそれを避けたいと気づいた。ごめんなさい。

あなたが持っているものは、フラスコサーバー上のURLマッピングです。 @app.route('/scripts/picture/<datasetName>.js', methods=['GET'])は、ページ上でクライアント側に必要なパラメータを含むクライアント側スクリプトファイルを生成します。 このようにして、スクリプト関連のコードをhtmlとは別に保つことができます。