Posting Canvas to Imgur
New here? Learn about Bountify and follow @bountify to get notified of new bounties! x

I've been banging my head on the Imgur.com documentation but must be missing something.

What I'm looking to do is take my fabricjs canvas, which I can already save as an image, and upload it as an image to Imgur.com.

How I'd imagine it'd work: User draws/does something with the canvas > User clicks Send to Imgur button > Script would generate and upload that to Imgur.

Here's my little fiddle example: https://jsfiddle.net/code4ever/66ygaezs/

Please let me know if I can provide any more info that'd help you with writing something.

Thanks.

can you provide an api?
Chlegou 6 months ago
Hello, I believe this is the right part of it, but I may be mistaken: https://apidocs.imgur.com/#c85c9dfc-7487-4de2-9ecd-66f727cf3139
sharper 6 months ago
no i meant the userId (or clientId) that you have with imgur
Chlegou 6 months ago
Oh okay, so I may need to regenerate these as I only have the jsfiddle, not really any site for the callback yet: d460753dba2907b is my clientid
sharper 6 months ago
awarded to enderdba

Crowdsource coding tasks.

3 Solutions


Here is the most simple and sharper solution, ever created in the internet.

it just work like drinking tea!

project source: https://github.com/carry0987/Imgur-Upload

demo is available here: https://carry0987.github.io/Imgur-Upload/

Unfortunately, i can't work on your fiddle for now to modify it as you require, the project code is super easy, hope you understand it and accept that.

if you didn't came to solve it by yourself, you can wait, i can deliver it (your fiddle modified) after +2Hours from now,

And a tip would be nice :)

I can definitely wait the 2 hours! I will play with this in the meantime. Thank you.
sharper 6 months ago
ok nice :) i will text you in 1 hour, to see if you come up with it, so i start or not if you solved it.
Chlegou 6 months ago

Here is a solution to upload an image to imgur.

var client_id = ""; // Your client Id
var access_token = ""; // Your access token
var image_url = "";// URL of the image to upload
var album_id = ""; // The album you are uploading to


 var form = new FormData();
 form.append("image", image_url); 
 form.append("album", album_id);
var xhttp = new XMLHttpRequest();

xhttp.open("POST", "https://api.imgur.com/3/image", true);

xhttp.setRequestHeader('Authorization', 'Client-ID '+client_id); 
xhttp.setRequestHeader('Authorization', 'Bearer  '+access_token); 
xhttp.send(form);

xhttp.onreadystatechange =async function () {
    if (xhttp.readyState == 4 && xhttp.status == 200) {
        var res = JSON.parse(xhttp.responseText);
        console.log("done");
        console.log(res);
    }
}

Try the above solution and let me know if you have any hitches...

The album_id is optional... unless you want to upload to a specific album
mashtullah 6 months ago

Check this solution https://jsfiddle.net/enderdba/ehwhv6qj/ is using my client testing id just adding an ajax request to do the uploading stuff. I just convert the data URL to base 64 (the image) and then post it to imgur using their api.

This is very close to what I'm after! Could you make it so that the Save simply saves the image to your local instead of the Send to IMGUR button being dependent on it? Will gladly tip.
sharper 6 months ago
sure give me a sec
enderdba 6 months ago
Beautiful. Thank you sir/madame. Much appreciated
sharper 6 months ago
Would you consider adding a multiplier to the image size for a tip? I've tried, but can't seem to get the image larger (so that it's a little more clear on IMGUR). Cheers
sharper 5 months ago
A multiplier? Could you give an example so i can try and implement it on the actual solution?
enderdba 5 months ago
View Timeline