I'm building a funny Chrome-Experiment. The Mustache Mirror! / I want to use the Imgur API V3 to upload an image from te canvas to Imgur and then show the link, but I really don't know how. All the working examples I find are using the V2 API...

I use canvas.toDataURL:

var dataURL = canvas.toDataURL("image/png");
return dataURL.replace(/^data:image\/(png|jpg);base64,/, "");

I'm building a funny Chrome-Experiment. The Mustache Mirror! http://sjoerddijkstra.nl/cam/ I want to use the Imgur API V3 to upload an image from te canvas to Imgur and then show the link, but I really don't know how. All the working examples I find are using the V2 API...

I use canvas.toDataURL:

var dataURL = canvas.toDataURL("image/png");
return dataURL.replace(/^data:image\/(png|jpg);base64,/, "");

• javascript
• api
• google-chrome
• imgur

• Hillarious application! – samuraiseoul Commented Dec 11, 2013 at 4:23

1 Answer 1

Imgur documentation is kinda poor IMO but after asking around in SO I found this to work:

try {
    var img = document.getElementById('myCanvas').toDataURL('image/jpeg', 0.9).split(',')[1];
} catch(e) {
    var img = document.getElementById('myCanvas').toDataURL().split(',')[1];
}

$.ajax({
    url: 'https://api.imgur./3/image',
    type: 'post',
    headers: {
        Authorization: 'Client-ID <CHANGE_THIS_TO_BE_YOUR_CLIENT_ID>'
    },
    data: {
        image: img
    },
    dataType: 'json',
    success: function(response) {
        if(response.success) {
            window.location = response.data.link;
        }
    }
});

Replace <CHANGE_THIS_TO_BE_YOUR_CLIENT_ID> with the client id you get when you register your app here (I picked the "anonymous usage without user authorization" option).