Uploading ‘canvas’ image data to the server

by

FWIW, this is how I got it working.

My server is in google app engine. I send canvas.toDataURL()’s output as part of post request using jQuery.post. The data URL is base64 encoded image data. So on server I decode it and convert it to image

import re 
import base64
class TnUploadHandler(webapp.RequestHandler):
    dataUrlPattern = re.compile('data:image/(png|jpeg);base64,(.*)$')
    def post(self):
        uid = self.request.get('uid')
        img = self.request.get('img')

        imgb64 = self.dataUrlPattern.match(img).group(2)
        if imgb64 is not None and len(imgb64) > 0:
            thumbnail = Thumbnail(
                    uid = uid, img = db.Blob(base64.b64decode(imgb64)))
            thumbnail.put()

From client I send the data like this:

$.post('/upload',
        {
            uid : uid,
            img : canvas.toDataURL('image/jpeg')
        },
        function(data) {});

This may not be the best way to do it, but it works.

More Related Contents:

  1. How do I add a simple onClick event handler to a canvas element?
  2. How To Save Canvas As An Image With canvas.toDataURL()?
  3. How to add image to canvas
  4. Use HTML5 to resize an image before upload
  5. Simulation background-size: cover in canvas
  6. HTML5 Canvas to PNG File
  7. Cross-origin data in HTML5 canvas
  8. HTML5 Canvas drawImage ratio bug iOS
  9. Can I get image from canvas element and use it in img src tag?
  10. How to save image from canvas with CSS filters
  11. Getting mouse location in canvas [duplicate]
  12. Download Canvas as PNG in fabric.js giving network Error
  13. How to draw polygons on an HTML5 canvas?
  14. HTML2canvas generates Blurry images
  15. Using Canvas to animate a sorting algorithm in JS
  16. Save canvas as jpg to desktop [duplicate]
  17. Why does HTML Canvas getImageData() not return the exact same values that were just set?
  18. Drawing rotated text on a HTML5 canvas
  19. HTML5 Canvas Circle Text
  20. Angle gradient in canvas
  21. HTML5 Dynamically create Canvas
  22. Preventing Canvas Clear when Resizing Window
  23. How to draw a blurry circle on HTML5 canvas?
  24. Rasterizing an in-document SVG to Canvas
  25. Image Manipulation – add image with corners in exact positions
  26. HTML5 Canvas API – formatting individual words with italics
  27. Converting Chart.js canvas chart to image using .toDataUrl() results in blank image
  28. Update HTML5 canvas rectangle on hover?
  29. how to animate drawing lines on canvas
  30. True Isometric Projection with HTML5 Canvas

Leave a Comment