Uploading to Imgur

This example demonstrates how you might integrate Literally Canvas with a service like Imgur. The “Upload to Imgur” button will anonymously upload the contents of the canvas to Imgur and redirect you to its page.

Note that unless you set a background color in the color picker, the exported image will have a transparent background, which will be drawn against a dark background on Imgur’s site.

<div class="literally imgur"></div>

<form class="imgur-submit">
    <input type="submit" data-action="upload-to-imgur" value="Upload to Imgur">
</form>

<script>
  $(document).ready(function(){
    var lc = LC.init(document.getElementsByClassName('literally imgur')[0]);
    $('[data-action=upload-to-imgur]').click(function(e) {
      e.preventDefault();

      $('.imgur-submit').html('Uploading...')

      // this is all standard Imgur API; only LC-specific thing is the image
      // data argument;
      $.ajax({
        url: 'https://api.imgur.com/3/image',
        type: 'POST',
        headers: {
          // Your application gets an imgurClientId from Imgur
          Authorization: 'Client-ID ' + imgurClientId,
          Accept: 'application/json'
        },
        data: {
          // convert the image data to base64
          image:  lc.canvasForExport().toDataURL().split(',')[1],
          type: 'base64'
        },
        success: function(result) {
          var url = 'https://imgur.com/gallery/' + result.data.id;
          $('.imgur-submit').html("<a href='" + url + "'>" + url + "</a>");
        },
      });
    });
  });
</script>