Decrypt base64 and insert image in db

[Ruud Schroen]

Hi. I posted a topic earlier about html2canvas to db. Now i got a new issue so i figured i'd start a new thread.

html2canvas takes a screenshot of all the content inside a div and creates a canvas which acts as the image. After that the canvas is converted to a base64 code. I send this code a web2py function via JSON. When that is done i want to decrypt the base64 string and upload the image to a db.

This is my javascript and web2py code:

<script type="text/javascript">

        html2canvas(document.getElementById('wireframe'), {

            onrendered: function(canvas) {

            var url = '{{=URL(f="update",args=request.args,vars=request.vars)}}';

        var data = canvas.toDataURL("image/png");

            $.ajax({

                url: url,

                type: "GET",

                data: {'data':data},

                datatype: 'json',

                success: function (html) {

    $('#results').html(html);

    }

            });

            return false;

        }

});

</script>

def update():

    from io import BytesIO

    from PIL import Image

    import base64

    image = request.vars.data[request.vars.data.find(",")+1:]

    im = Image.open(BytesIO(base64.b64decode(image)))

    return db.wireframe.insert(screenshot=image)

The base64 code reaches the function, but when i insert the decrypted code into the db, it says "Cannot handle upload". What am i doing wrong?

This is an example of the file path WITHOUT the decryption (taken from succeeded db insert):

http://localhost:8000/ezwireframes/appadmin/download/db/iVBORw0KGgoAAAANSUhEUgAABQUAAAATCAYAAAApt2shAAAD3UlEQVR4Xu3dS4hNYQAH8JkaG4+krGSBsPFI5FXKlJUdMmVhZyOvIisLRCkLCVGTrCjlUWwopSyUiDwiJUpJNhZSiCj/r86UJmbm2pxu32/q3zd3zjn3fN/vnNW/M/f29vghQIAAAQIECBAgQIAAAQIECBAgQKAqgd6qVmuxBAgQIECAAAECBAgQIECAAAECBAj0KAXdBAQIECBAgAABAgQIECBAgAABAgS6T2Btprw7mZvMSIa/HnFFSsHuu+BmTIAAAQIECBAgQIAAAQIECBAg0J0CazLt7cn65HYymFxOJiSHks3Nsi5k3J98GWWZO7J9bzKj2W/4638erhTszhvIrAkQIECAAAECBAgQIECAAAECBLpTYFGm/TgpxeC1YUu407zuH+PSlIJjhLIbAQIECBAgQIAAAQIECBAgQIAAgTYFlIJt6js3AQIECBAgQIAAAQIECBAgQIAAgRYEOi0FZ2WOJ5PvybTkfHKmmfdoTwrOzH4nkr7kZ/MeuzJ+8O/DLVx5pyRAgAABAgQIECBAgAABAgQIEKhWoJNSsHR3T5OzyalkevI26U/uJqOVgg+yz43kYKN9LOOqZLlSsNr7z8IJECBAgAABAgQIECBAgAABAgRaEBgqBV/k3B+Hnb9se9KUfmXTkuRhUsrA982+rzKWpwUPJyOVgouz/VEyO3nTHDsv4/PyvkrBFq68UxIgQIAAAQIECBAgQIAAAQIECFQr0MmTghuidDW5kvxqxErJdzEpT/2NVAoOZPulpHyz8dfm2EkZPycDSsFq7z8LJ0CAAAECBAgQIECAAAECBAgQaEHgf0rBKZnnp7/MdaRScGP2v5xMTL40x05u3mejUrCFK++UBAgQIECAAAECBAgQIECAAAEC1Qp0UgoujVL5XMAVyf0OS8Gh88zJca+bYxdkfJYsUgpWe/9ZOAECBAgQIECAAAECBAgQIECAQAsCnZSCpbt7mbxL1iXlib/yt3HJj2S0Lxq5l31uJQeadR7PWArGlUrBFq68UxIgQIAAAQIECBAgQIAAAQIECFQpsDqr3ppsSm4mg8n1ZHyyL9nSqJzLeCQpnwW4MDmdzE8+JOULSvYk5am/Mi5LjialPNz2x+sT+X1qUr61uJSIfcm3ZGfyVilY5f1n0QQIECBAgAABAgQIECBAgAABAjULKAVrvvrWToAAAQIECBAgQIAAAQIECBAgUKWAUrDKy27RBAgQIECAAAECBAgQIECAAAECNQsoBWu++tZOgAABAgQIECBAgAABAgQIECBQpYBSsMrLbtEECBAgQIAAAQIECBAgQIAAAQI1C/wGTQp2HFGzKI0AAAAASUVORK5CYII=

[Michele Comitini]

I do not understand exactly what the code does, but here is what I would try:

1. Don't use GET use a POST

2. Use a binary post see: https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Sending_and_Receiving_Binary_Data

3. use binary strings in javascript

4. use a bjson library

2013/10/12 Ruud Schroen <ru...@formatics.nl>

--
Resources:
- http://web2py.com
- http://web2py.com/book (Documentation)
- http://github.com/web2py/web2py (Source code)
- https://code.google.com/p/web2py/issues/list (Report Issues)
---
You received this message because you are subscribed to the Google Groups "web2py-users" group.
To unsubscribe from this group and stop receiving emails from it, send an email to web2py+un...@googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.

[Michele Comitini]

for 3. you may find some reference here https://developer.mozilla.org/en-US/docs/Web/API/FileReader?redirectlocale=en-US&redirectslug=DOM%2FFileReader#readAsBinaryString()

2013/10/12 Michele Comitini <michele....@gmail.com>