回答編集履歴

4 微修正

退会済みユーザー

退会済みユーザー

2017/08/27 01:20  投稿

> 画像ファイルを静的に保存しないで、render_template()を使って表示する方法
このようにしてみました。(動作確認済、未テスト)
HTMLのimage要素にはsrc属性にbase64でエンコードしたメディア情報を埋め込むことでも画像が表示できるので、
今回はそれを利用しました。画像ファイル名はalt属性に挿入しました。
今回はそれを利用しました。画像名はalt属性に挿入しました。
```
# coding:utf-8
# ---app.py---
from flask import Flask, render_template, Response,request,redirect,url_for
import datetime
from PIL import Image
import qrcode as qr
import base64
from io import BytesIO
# flask incetance
app = Flask(__name__)
# index page, input code
@app.route('/')
def index():
   now = datetime.datetime.now()
   timeString = now.strftime("%Y-%m-%d %H:%M")
   return render_template('index.html',time=timeString)
@app.route('/input_code', methods=['POST'])
def input_code():
   code_input = request.form['code']
   qr_b64data = qrmaker(str(code_input))
   ts = datetime.datetime.now()
   qr_name = "qrcode_image_{}.png".format(ts.strftime("%Y-%m-%d_%H-%M-%S"))
   qr_name = "qrcode_image_{}".format(ts.strftime("%Y-%m-%d_%H-%M-%S"))
   return render_template("output_code.html",
       data=code_input,
       qr_b64data=qr_b64data,
       qr_name=qr_name
   )
# retry and quit
@app.route('/event', methods=['POST'] )
def event():
   if request.method == 'POST':
       if request.form['submit'] == 'Retry':
          return redirect(url_for('index'))
       elif request.form['submit'] == 'Quit':
           return Response('Please close the web browser')
       else:
           pass # unknown
   elif request.method == 'GET':
       return redirect(url_for('index'))
# QRmakerという名前はpythonの命名規則に反するように思われるのですべて小文字にしました。
def qrmaker(code):
   qr_img = qr.make(str(code))
 
   # 画像書き込み用バッファを確保して画像データをそこに書き込む
   buf = BytesIO()
   qr_img.save(buf,format="png")
   # バイナリデータをbase64でエンコードし、それをさらにutf-8でデコードしておく
   qr_b64str = base64.b64encode(buf.getvalue()).decode("utf-8")
   # image要素のsrc属性に埋め込めこむために、適切に付帯情報を付与する
   qr_b64data = "data:image/png;base64,{}".format(qr_b64str)
   return qr_b64data
# メニュー画面作成
if __name__ == '__main__':
   app.run(host='0.0.0.0', debug=True)
```
```
<!--output_code.html -->
<head>
   <meta charset="UTF-8">
   <title>QR Code</title>
</head>
   <body>
   <form action={{ url_for('event') }} method="post">
       <input type="submit" name="submit" value="Retry">
       <input type="submit" name="submit" value="Quit">
   <br>
       <h2>{{data}}</h2>
       <h2>QR image</h2>
       <img src="{{qr_b64data}}" alt="{{qr_name}}" >
   </body>
</html>
```
3 ファイル名を追記

退会済みユーザー

退会済みユーザー

2017/08/27 01:12  投稿

> 画像ファイルを静的に保存しないで、render_template()を使って表示する方法
このようにしてみました。(動作確認済、未テスト)
HTMLのimage要素にはsrc属性にbase64でエンコードしたメディア情報を埋め込むことでも画像が表示できるので、
今回はそれを利用しました。画像ファイル名はalt属性に挿入しました。
```app.py
```
# coding:utf-8
 
# ---app.py---  
from flask import Flask, render_template, Response,request,redirect,url_for
import datetime
from PIL import Image
import qrcode as qr
import base64
from io import BytesIO
# flask incetance
app = Flask(__name__)
# index page, input code
@app.route('/')
def index():
   now = datetime.datetime.now()
   timeString = now.strftime("%Y-%m-%d %H:%M")
   return render_template('index.html',time=timeString)
@app.route('/input_code', methods=['POST'])
def input_code():
   code_input = request.form['code']
   qr_b64data = qrmaker(str(code_input))
   ts = datetime.datetime.now()
   qr_name = "qrcode_image_{}.png".format(ts.strftime("%Y-%m-%d_%H-%M-%S"))
   return render_template("output_code.html",
       data=code_input,
       qr_b64data=qr_b64data,
       qr_name=qr_name
   )
# retry and quit
@app.route('/event', methods=['POST'] )
def event():
   if request.method == 'POST':
       if request.form['submit'] == 'Retry':
          return redirect(url_for('index'))
       elif request.form['submit'] == 'Quit':
           return Response('Please close the web browser')
       else:
           pass # unknown
   elif request.method == 'GET':
       return redirect(url_for('index'))
# QRmakerという名前はpythonの命名規則に反するように思われるのですべて小文字にしました。
def qrmaker(code):
   qr_img = qr.make(str(code))
 
   # 画像書き込み用バッファを確保して画像データをそこに書き込む
   buf = BytesIO()
   qr_img.save(buf,format="png")
   # バイナリデータをbase64でエンコードし、それをさらにutf-8でデコードしておく
   qr_b64str = base64.b64encode(buf.getvalue()).decode("utf-8")
   # image要素のsrc属性に埋め込めこむために、適切に付帯情報を付与する
   qr_b64data = "data:image/png;base64,{}".format(qr_b64str)
   return qr_b64data
# メニュー画面作成
if __name__ == '__main__':
   app.run(host='0.0.0.0', debug=True)
```
```output_code.html
```
<!--output_code.html -->
<head>
   <meta charset="UTF-8">
   <title>QR Code</title>
</head>
   <body>
   <form action={{ url_for('event') }} method="post">
       <input type="submit" name="submit" value="Retry">
       <input type="submit" name="submit" value="Quit">
   <br>
       <h2>{{data}}</h2>
       <h2>QR image</h2>
       <img src="{{qr_b64data}}" alt="{{qr_name}}" >
   </body>
</html>
```
2 今回の問題に関係がないので、削除

退会済みユーザー

退会済みユーザー

2017/08/27 01:07  投稿

> 画像ファイルを静的に保存しないで、render_template()を使って表示する方法
このようにしてみました。(動作確認済、未テスト)
HTMLのimage要素にはsrc属性にbase64でエンコードしたメディア情報を埋め込むことでも画像が表示できるので、
今回はそれを利用しました。画像ファイル名はalt属性に挿入しました。
 
テンプレートエンジンを使っておいででしたのでご紹介しませんでしたが、  
他に、クライアントサイドでJSを使ってblobデータを作り、  
Blob URL Schemeを生成して、  
srcに埋め込むといった方法も考えられます。  
```app.py
# coding:utf-8
from flask import Flask, render_template, Response,request,redirect,url_for
import datetime
from PIL import Image
import qrcode as qr
import base64
from io import BytesIO
# flask incetance
app = Flask(__name__)
# index page, input code
@app.route('/')
def index():
   now = datetime.datetime.now()
   timeString = now.strftime("%Y-%m-%d %H:%M")
   return render_template('index.html',time=timeString)
@app.route('/input_code', methods=['POST'])
def input_code():
   code_input = request.form['code']
   qr_b64data = qrmaker(str(code_input))
   ts = datetime.datetime.now()
   qr_name = "qrcode_image_{}.png".format(ts.strftime("%Y-%m-%d_%H-%M-%S"))
   return render_template("output_code.html",
       data=code_input,
       qr_b64data=qr_b64data,
       qr_name=qr_name
   )
# retry and quit
@app.route('/event', methods=['POST'] )
def event():
   if request.method == 'POST':
       if request.form['submit'] == 'Retry':
          return redirect(url_for('index'))
       elif request.form['submit'] == 'Quit':
           return Response('Please close the web browser')
       else:
           pass # unknown
   elif request.method == 'GET':
       return redirect(url_for('index'))
# QRmakerという名前はpythonの命名規則に反するように思われるのですべて小文字にしました。
def qrmaker(code):
   qr_img = qr.make(str(code))
 
   # 画像書き込み用バッファを確保して画像データをそこに書き込む
   buf = BytesIO()
   qr_img.save(buf,format="png")
   # バイナリデータをbase64でエンコードし、それをさらにutf-8でデコードしておく
   qr_b64str = base64.b64encode(buf.getvalue()).decode("utf-8")
   # image要素のsrc属性に埋め込めこむために、適切に付帯情報を付与する
   qr_b64data = "data:image/png;base64,{}".format(qr_b64str)
   return qr_b64data
# メニュー画面作成
if __name__ == '__main__':
   app.run(host='0.0.0.0', debug=True)
```
```output_code.html
<head>
   <meta charset="UTF-8">
   <title>QR Code</title>
</head>
   <body>
   <form action={{ url_for('event') }} method="post">
       <input type="submit" name="submit" value="Retry">
       <input type="submit" name="submit" value="Quit">
   <br>
       <h2>{{data}}</h2>
       <h2>QR image</h2>
       <img src="{{qr_b64data}}" alt="{{qr_name}}" >
   </body>
</html>
```
1 誤字訂正

退会済みユーザー

退会済みユーザー

2017/08/27 00:52  投稿

> 画像ファイルを静的に保存しないで、render_template()を使って表示する方法
このようにしてみました。(動作確認済、未テスト)
HTMLのimage要素にはsrc属性にbase64でエンコードしたメディア情報を埋め込むことでも画像が表示できるので、
今回はそれを利用しました。画像ファイル名はalt属性に挿入しました。
テンプレートエンジンを使っておいででしたのでご紹介しませんでしたが、
他に、クライアントサイドでJSを使ってblobデータを作り、
Blob URL Schemeを生成して、
srcに埋め込むといった方法も考えられます。
```app.py
# coding:utf-8
from flask import Flask, render_template, Response,request,redirect,url_for
import datetime
from PIL import Image
import qrcode as qr
import base64
from io import BytesIO
# flask incetance
app = Flask(__name__)
# index page, input code
@app.route('/')
def index():
   now = datetime.datetime.now()
   timeString = now.strftime("%Y-%m-%d %H:%M")
   return render_template('index.html',time=timeString)
@app.route('/input_code', methods=['POST'])
def input_code():
   code_input = request.form['code']
   qr_b64data = qrmaker(str(code_input))
   ts = datetime.datetime.now()
   qr_name = "qrcode_image_{}.png".format(ts.strftime("%Y-%m-%d_%H-%M-%S"))
   return render_template("output_code.html",
       data=code_input,
       qr_b64data=qr_b64data,
       qr_name=qr_name
   )
# retry and quit
@app.route('/event', methods=['POST'] )
def event():
   if request.method == 'POST':
       if request.form['submit'] == 'Retry':
          return redirect(url_for('index'))
       elif request.form['submit'] == 'Quit':
           return Response('Please close the web browser')
       else:
           pass # unknown
   elif request.method == 'GET':
       return redirect(url_for('index'))
# QRmakerという名前はpythonの命名規則に反するように思われるのですべて小文字にしました。
def qrmaker(code):
   qr_img = qr.make(str(code))
 
   # 画像読み込み用バッファを確保して画像データをそこに書き込む
   # 画像書き込み用バッファを確保して画像データをそこに書き込む
   buf = BytesIO()
   qr_img.save(buf,format="png")
   # バイナリデータをbase64でエンコードし、それをさらにutf-8でデコードしておく
   qr_b64str = base64.b64encode(buf.getvalue()).decode("utf-8")
   # image要素のsrc属性に埋め込めこむために、適切に付帯情報を付与する
   qr_b64data = "data:image/png;base64,{}".format(qr_b64str)
   return qr_b64data
# メニュー画面作成
if __name__ == '__main__':
   app.run(host='0.0.0.0', debug=True)
```
```output_code.html
<head>
   <meta charset="UTF-8">
   <title>QR Code</title>
</head>
   <body>
   <form action={{ url_for('event') }} method="post">
       <input type="submit" name="submit" value="Retry">
       <input type="submit" name="submit" value="Quit">
   <br>
       <h2>{{data}}</h2>
       <h2>QR image</h2>
       <img src="{{qr_b64data}}" alt="{{qr_name}}" >
   </body>
</html>
```

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る