Question

我正在开发一款需要从Google地图生成静态图片，处理它然后重新上传的应用。

我把它保存到变量：

var img = document.createElement('div');
    document.body.appendChild(img)
    img.innerHTML = "<img src='https://maps.googleapis.com/maps/api/staticmap?center=35.510900927600225,24.016252229213706&zoom=19&size=400x400&maptype=satellite&key=AIzaSyDbccgp5K3qn8Sh5IFKoqZ2RGyg8G8bqZ8'></img>";

我需要从app.py文件中访问此图片。

有什么想法吗？

Answer 1

我正在展示一种使用AJAX为图像添加替代文本的方法。

application.py

from flask import Flask, render_template, request, url_for, redirect
app = Flask(__name__)

@app.route('/show_map_result', methods=['GET','POST'])
def show_map_result():
    if request.method == "POST":
        image_data = request.form.get("image_data")
        # Work on the received value as required
        return "Sample image alternate message"
    else:
        return redirect(url_for('show_index'))

@app.route('/')
@app.route('/index')
def show_index():
    return render_template("google_map.html")

if __name__ == '__main__':
    app.run(debug=True)

模板google_map.html包含：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="author" content="Ahmedur Rahman Shovon">
    <title>AJAX Example</title>
</head>
<body>
    <button id="load_map">Load Map</button>
    <div id="map"></div>
    <!-- jQuery -->
    <script
    src="https://code.jquery.com/jquery-1.12.4.min.js"
    integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
    crossorigin="anonymous"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            function ajax_request(){
                $img_tag = '<img id="image_map" src="https://maps.googleapis.com/maps/api/staticmap?center=35.510900927600225,24.016252229213706&zoom=19&size=400x400&maptype=satellite&key=AIzaSyDbccgp5K3qn8Sh5IFKoqZ2RGyg8G8bqZ8"/>';
                $img_div = '<div id="image_div">'+$img_tag+'</div>';
                $("#map").html($img_div);

                $.ajax({
                    url: '{{ url_for("show_map_result") }}',
                    data: {
                        "image_data" : $img_div,
                    },
                    type: 'POST',
                    success: function(response) {
                        $("#image_map").attr("alt", response);                      
                    },
                    error: function(error) {
                    }
                });             
            }
            $("#load_map").on("click", function () {
                ajax_request();
            });
        })
    </script>
</body>
</html>

输出：

替代文本从Flask文件传递到模板。在调用AJAX请求之后，已将替代文本添加到新创建的图像中。它演示了您可以使用AJAX从Flask访问任何DOM元素（动态或静态）。

从Flask访问img

1 个答案: