Upload a canvas image to imgur (api v3) with javascript - Stack Overflow

admin管理员组

文章数量:1320773

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

Share Improve this question Follow edited Jul 23, 2013 at 8:51 rid 63.6k3131 gold badges157157 silver badges197197 bronze badges asked Jul 23, 2013 at 8:46 Sjoerd DijkstraSjoerd Dijkstra 4111 silver badge33 bronze badges 1

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

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 11

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).

本文标签： Upload a canvas image to imgur (api v3) with javascriptStack Overflow