Skip to main content

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

Answered
Rahul C

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

Comments

10 comments

Date Votes
  • Itay Taragano

    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
  • Rahul C

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

    0
  • Itay Taragano

    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
  • Eduardo Ramos

    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
  • Itay Taragano

    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
  • Antonio de perio

    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
  • Itay Taragano

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

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

    0
  • Antonio de perio

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

    0
  • Antonio de perio

    Sorry, meant to say does it work with UNSIGNED uploads

    0
  • Antonio de perio

    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

Post is closed for comments.

Didn't find what you were looking for?

New post