俺がmongoDBに「画像データ」として保存してみた件 #MongoDB

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>