imgur-oauth-test.html

## imgur-oauth-test.html
<!DOCTYPE html>

<html lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>imgur oauth</title>
    <script src="http://code.jquery.com/jquery.min.js"></script>
    <script>
      $(function () {
        var extractToken = function(hash) {
          var match = hash.match(/access_token=(\w+)/);
          return !!match && match[1];
        };

        var $post = $('.post');
        var $msg = $('.hidden');
        var $img = $('img');

        $post.click(function() {
          localStorage.doUpload = true;
          localStorage.imageBase64 = $img.attr('src').replace(/.*,/, '');
        });

        var token = extractToken(document.location.hash);
        if (token && JSON.parse(localStorage.doUpload)) {
          localStorage.doUpload = false;
          $post.hide();
          $msg.show();

          $.ajax({
            url: 'https://api.imgur.com/3/image',
            method: 'POST',
            headers: {
              Authorization: 'Bearer ' + token,
              Accept: 'application/json'
            },
            data: {
              image: localStorage.imageBase64,
              type: 'base64'
            },
            success: function(result) {
              var id = result.data.id;
              window.location = 'https://imgur.com/gallery/' + id;
            }
          });
        }
      });
    </script>
    <style>
      .hidden {
        display: none;
      }
    </style>
  </head>

  <body>
    <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot">
    <div>
      <a class="post" href="https://api.imgur.com/oauth2/authorize?response_type=token&client_id=1e9d0bad8e66dcb">
        Post image to imgur
      </a>
    </div>

    <div class="hidden">
      <p>Posting to imgur...</p>
    </div>
  </body>
</html>