mongoDBにcanvasの描画を画像データとして保存してみる。
toDataURL()を使う。
app.py
from bottle import run, get, post, request, redirect
from bottle import TEMPLATE_PATH, jinja2_template as template
import bottle
import pymongo
app = bottle.app()
TEMPLATE_PATH.append("./templates")
@app.route('/')
def index():
return template("index.html")
@app.route('/post', method=['POST'])
def getimg():
img = request.forms.get('img');
name = request.forms.get('name');
conn=pymongo.Connection()
db=conn.mydb
db.imgcol
db.imgcol.save({"name":name,"img":img})
return redirect('/imgview')
@app.route('/imgview',method=['GET'])
def img():
conn=pymongo.Connection()
db=conn.mydb
db.imgcol
result = db.imgcol.find()
return template("imgview.html", result=result)
if __name__=='__main__':
app.run(host='localhost', port=8080, reloader=True)
canvasで四角を描画するのと名前の入力部分。
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="app.js"></script>
<script>
function draw() {
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.fillStyle = "rgb(200, 100, 0)";
ctx.fillRect(20, 30, 60, 40);
};
function myToDataUrl(){
var canvas = document.getElementById('canvas');
var img_png_src = canvas.toDataURL();
var myname = document.getElementById('myname').value;
gotoNext('/post','img',img_png_src,'name',myname);
};
function gotoNext(action,name,value,name2,value2){
var form = document.createElement("form");
form.setAttribute("action", action);
form.setAttribute("method", "post");
form.style.display = "none";
document.body.appendChild(form);
var input = document.createElement('input');
input.setAttribute('type', 'hidden');
input.setAttribute('name', name);
input.setAttribute('value', value);
form.appendChild(input);
var input2 = document.createElement('input');
input2.setAttribute('type', 'hidden');
input2.setAttribute('name', name2);
input2.setAttribute('value', value2);
form.appendChild(input2);
form.submit();
};
</script>
</head>
<body onload="draw();">
<canvas id="canvas" width="150" height="150"></canvas>
<br>
<p>name: <input id="myname" type="text" name="name" size="50"></p>
<button onClick="myToDataUrl();">PUSH</button>
</body>
</html>
画像と名前をリスト表示するテンプレート
imgview.html
<ul>
{% for item in result %}
<li><img src={{item.img}} alt="">{{item.name}}</li>
{% endfor %}
</ul>