Question

我正在使用Flask服务器。一些模板使用自己的JavaScript脚本。其中一个脚本在页面上生成一个svg。此功能需要服务器生成的图片。

以下是目前存在的简化版本：

模板（myTemplate.html）：

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

javascript（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");

flask服务器（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中的所有内容都相互叠加。

第二种方法是将加载的图像作为background-image或其<div>的CSS <svg>的一部分。 CSS具有良好的背景图像支持，可以选择拉伸，截断和平铺。教程is here。

最终选择需要更多手术：

删除<img ...>代码
让您的D3代码生成image元素。 docs are here。{{3}}。

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

这是可行的，但我不推荐它。 CSS具有比SVG更好的大小调整，定位和平铺控制，尤其是。相对于整个浏览器页面。通常必须明确指定图像参数，包括图像宽度和高度，因此您必须知道或计算它们。从模板到JS的沟通存在问题datasetName的价值。所以...坚持使用其中一个CSS选项。理想情况下是第一个。

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分开。

如何使脚本知道烧瓶参数？

2 个答案: