imgur api and paperjs nsfw fork

click thru random image along with canvas.todataurl support thru base64 images

by Nick Hulea

HTML

<script src="http://cdn.eyahuska.com/papernew.js"></script>
<canvas resize="true" id="mycanvas"></canvas>
<div id="preloader" style="display:none;">
    <div id="status">LOADING...
        <br></br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et porta neque. Nunc eu mi porttitor, tincidunt odio a, sagittis ante. Morbi et justo sit amet erat porttitor dictum. In hac habitasse platea dictumst. Aenean vehicula orci et lorem euismod.</div>
</div>
<div id="button">click</div>
<script type="text/paperscript" canvas="mycanvas">
    var r;
    var path;
    var preloadAmount = 4;
    var cache = [];
    var imgurcache = [];
    var convertCache = [];
    var resultcache = [];
    var rArray = [];
    var convertedArray = [];
    var ajaxlength = [];
    var raster;
    var background;
    var imagesrc;
    var numberofclicks = 0;
    var imagesrcs;
    var autoShowNext = false;
    var value = isNaN(value) ? 0 : value;
    var valueajax = isNaN(valueajax) ? 0 : valueajax;


    function base64(url) {
        var dataURL;
        var img = new Image(),
            canvas = document.createElement("canvas"),
            ctx = canvas.getContext("2d"),
            src = url;
        // insert image url here

        img.crossOrigin = "Anonymous";

        img.onload = function() {
            canvas.height = img.height;
            canvas.width = img.width;
            ctx.drawImage(img, 0, 0);
            var dataURL = canvas.toDataURL('image/png');
            canvas = null;
            preload(dataURL);
        };
        img.src = url;
    }

    function extractToken(hash) {
        var match = hash.match(/access_token=(\w+)/);
        return !!match && match[1];
    }
    var num = Math.floor(Math.random() * 10); // 0...6
    var token = extractToken(document.location.hash);
    var clientId = 'b144351ffb05838';
    var auth;
    if (token) authorization = 'Bearer ' + token;
    else authorization = 'Client-ID ' + clientId;
    $.ajax({
       url:...

CSS

body {
    font-family:"Lucida Console", Monaco, monospace;
}
canvas {
    display:block;
    width:100%;
    overflow:hidden;
    position:absolute;
    top:0;
    left:0;
    margin-top:50px;
    cursor:pointer;
    z-index:-1;
}
#button {
    width:10%;
    overflow:hidden;
    position:absolute;
    top:0;
    left:0;
    background-color:#666;
    color:#fff;
    padding:10px;
}
#button:hover {
    background-color:#000;
    cursor:pointer;
}
#preloader {
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background-color:rgba(255, 255, 255, 0.5);
    z-index:100;
}
#status {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    width: 300px;
    height: 250px;
    background: rgba(255, 255, 255, 0.90);
    padding: 22px 32px;
    -moz-box-shadow: 0 0 18px rgba(0, 0, 0, 0.9);
    -webkit-box-shadow: 0 0 18px rgba(0, 0, 0, 0.9);
    -box-shadow: 0 0 18px rgba(0, 0, 0, 0.9);
    font-family:"Lucida Console", Monaco, monospace;
}

JavaScript

$("#button").on("click", function () {
    var img = document.createElement('img');
    var canvas = document.getElementById('mycanvas');
    var url = canvas.toDataURL(); // Read succeeds, canvas won't be dirty
    //console.log(url);
    img.src = url;
});