WORKING NEEDS UPDATE FOR AJAX RELOAD OF IMAGES optimizing code for speed working (imgur api paper working random image NO DRAWING public (

working (cross browser working for data images do not alter !!!) you can edit this code to your hearts content

by Nick Hulea

HTML

<script src="http://cdn.eyahuska.com/papernew.js"></script>
<canvas resize="true" id="mycanvas"></canvas>
<div id="preloader" style="display:block;">
    <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 {
    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;
});