Googleマップから静止画像を生成し、処理してから再アップロードする必要があるアプリを開発しています。Flaskからimgにアクセスする
私は変数に保存します。
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>
出力：代替テキストは、テンプレートにフラスコファイルから渡された
。また、AJAXリクエストが呼び出された後、代替テキストが新しく作成されたイメージに追加されます。 AJAXを使用してFlaskから任意のDOM要素（動的または静的）にアクセスできることを示します。
画像ソースをajax投稿リクエストとして送信します。 – arsho