我正在开发一个应用程序,需要从谷歌地图生成静态图像,处理它然后重新上传它。
我将它保存到一个变量中:
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
文件中访问这个图像。
有任何想法吗?
我正在展示一种使用 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 元素(动态或静态)。
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句