imgur api and paperjs

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>
<script src="http://yourimage.io/dev_3/js/plugins.js"></script>
<script src="http://files.hulea.org/c2i.js"></script>
<div id="button">click</div>
<img id="imgs" src="" />
<canvas resize="true" id="mycanvas"></canvas>
<div id="preloader" style="display:none;">
    <div id="status">
        <div id="percentage"></div>
    </div>
</div>
<!--<form id="canvas-options">
<label>Filename:
        <input type="text" class="filename" id="canvas-filename" placeholder="doodle" />.png</label>
    <input type="submit" value="Save" />
</form> -->
<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 =...

CSS

body {
    font-family:"Lucida Console", Monaco, monospace;
}
canvas {
    display:block;
    width:100%;
    overflow:hidden;
    position:relative;
    top:0;
    left:0;
    cursor:pointer;
}
#button {
    width: 98%;
    height: 100px;
    overflow: hidden;
    position: relative;
    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;
    font-family:"Lucida Console", Monaco, monospace;
}
#status {
    font-size:75px;
    font-family:"Lucida Console", Monaco, monospace;
}

JavaScript

$("#button").on("click", function () {
    /*
    var img = new Image();
    var canvas = document.getElementById('mycanvas');
    var url = canvas.toDataURL(); // Read succeeds, canvas won't be dirty
    console.log(url);
    img.src = url;
    return img;
    console.log('image:' + img);
    */

    var canvas = document.getElementById('mycanvas');
    var imageUrl = canvas.toDataURL("image/jpeg");
    $('#imgs').attr('src',imageUrl);
    console.log(imageUrl);
    $('#newload').remove();
    canvas.width = canvas.width;
});


/*
$("#close_overlay").on("click", function () {
    var canvas = document.getElementById('mycanvas');
    var imageUrl = canvas.toDataURL("image/jpeg");
    $('html').css('background-image', 'url(' + imageUrl + ')');
    console.log(imageUrl);
    $('#newload').remove();
    canvas.width = canvas.width;
});

canvas_options_form.addEventListener("submit", function (event) {
    event.preventDefault();
    canvas.toBlob(function (blob) {
        saveAs(
        blob, (canvas_filename.value || canvas_filename.placeholder) + ".png");
    }, "image/png");
}, false);
*/