最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

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

programmeradmin2浏览0评论

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,/, "");
Share Improve this question edited Jul 23, 2013 at 8:51 rid 63.6k31 gold badges157 silver badges197 bronze badges asked Jul 23, 2013 at 8:46 Sjoerd DijkstraSjoerd Dijkstra 411 silver badge3 bronze badges 1
  • Hillarious application! – samuraiseoul Commented Dec 11, 2013 at 4:23
Add a ment  | 

1 Answer 1

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

发布评论

评论列表(0)

  1. 暂无评论