This support forum is no longer in use. Please use the Cloudinary Community at https://community.cloudinary.com/ to receive assistance from other members of the community and from Cloudinary's support team. For account-specific questions or if you believe that you've encountered a bug, please contact the Cloudinary team directly via the "submit a request" option on this support site.

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

Answered

Comments

10 comments

  • Avatar
    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
    Comment actions Permalink
  • Avatar
    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
    Comment actions Permalink
  • Avatar
    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
    Comment actions Permalink
  • Avatar
    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
    Comment actions Permalink
  • Avatar
    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
    Comment actions Permalink
  • Avatar
    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
    Comment actions Permalink
  • Avatar
    Itay Taragano

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

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

    0
    Comment actions Permalink
  • Avatar
    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
    Comment actions Permalink
  • Avatar
    Antonio de perio

    Sorry, meant to say does it work with UNSIGNED uploads

    0
    Comment actions Permalink
  • Avatar
    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
    Comment actions Permalink

Post is closed for comments.