Is there a detailed tutorial for uploading image from HTML5 canvas to Cloudinary?

Answered

Follow

Rahul C

• June 04, 2013 07:40

Hi,

I recently discovered cloudinary and find it a very interesting solution. I'm a newbie in technology and rely on tutorials and code samples to get by. I'm developing a photo app using Phonegap and am able to draw photo clicked by camera on canvas. Now I want to upload the photo to a server. I tried base64 encoding but it's slow and inefficient. I want to try cloudinary for this but don't know how to start. Is there a step-by-step tutorial with code samples for this?

Thanks,

Rahul.

0

• 

  Itay Taragano

  • June 04, 2013 20:35

  Hi Rahul,

  Base64 is the way to go at present. It adds 33% overhead to the upload time, but should otherwise work.

  We are working on adding Cloudinary integration and sample codes to all major mobile development frameworks / platforms. We currently have native support using our iOS and Java SDKs, and we have our jQuery integration library for HTML5 apps. We've also started integration with Parse and trigger.io (both should be available soon), and will most likely follow-up with phone gap afterward.

  0

  Comment actions Permalink
• 

  Rahul C

  • June 05, 2013 04:56

  Thanks for the quick reply. Is there an ETA to Parse and Appery (formerly Triggr)? It would definitely be a very welcome addition.

  0

  Comment actions Permalink
• 

  Itay Taragano

  • June 08, 2013 10:12

  Hi Rahul,

  Please take a look at our Parse and Trigger.io implementations,

  Note that currently they're both in 'beta':

  Parse:  https://github.com/cloudinary/cloudinary_parse

  Trigger.io:  https://github.com/cloudinary/cloudinary_triggerio

  0

  Comment actions Permalink
• 

  Eduardo Ramos

  • September 21, 2013 01:03

  I tried to look ate the appery.io (triggr.io) example but dont even know where to start. Is there a way to upload an image from papery using a REST api. This is what I get after taking a picture:

   

  data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/4QLWRXhpZg LOTS OF STUFFS HERE qA9K64f2ssoVLe454zjj865JSpu7Uj0MFXd

  Thanks!!

  ER

  0

  Comment actions Permalink
• 

  Itay Taragano

  • September 24, 2013 20:20

  Hi Eduardo,

  You should copy the contents of the src/js/lib library to your project and include them in the relevant page.

  You can then use $.cloudinary.uploader.upload(file, callback, options) to perform the actual upload.

  Also, you should copy the relevant parts from  https://github.com/cloudinary/cloudinary_triggerio/blob/master/src/config.json.sample

  or the CLOUDINARY_URL parameter and the necessary permissions.

  For security purposes, you can sign the request on a server backend and pass the parameters to upload method. Similar to what's explained here: 

  https://github.com/cloudinary/cloudinary_ios#safe-mobile-uploading

  0

  Comment actions Permalink
• 

  Antonio de perio

  • December 09, 2014 07:04

  Hi, just wondering where I specify my image in the cloudinary API if my image data come is the form of a data URI. I have a HTML canvas and the image data i get is also of the format:

  data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/4QLWRXhpZg LOTS OF STUFFS HERE qA9K64f2ssoVLe454zjj865JSpu7Uj0MFXd

  0

  Comment actions Permalink
• 

  Itay Taragano

  • December 09, 2014 10:37

  You can use something like the following (in Rails):

  Cloudinary::Uploader.upload('data:image/jpeg;base64,...')

  0

  Comment actions Permalink
• 

  Antonio de perio

  • December 09, 2014 10:48

  Hi Itay, thanks. Is there an example for Javascript? And does this work with signed uploads? Any chance for a full code example?

  0

  Comment actions Permalink
• 

  Antonio de perio

  • December 09, 2014 10:48

  Sorry, meant to say does it work with UNSIGNED uploads

  0

  Comment actions Permalink
• 

  Antonio de perio

  • December 09, 2014 11:13

  So I've tried the javascript version of that and it doesn't seem to work. I get an unknown server status error when trying that. I could really use a working example to reference from?

  0

  Comment actions Permalink

Post is closed for comments.