imgur api paper working random image NO DRAWING public with cross origin browser enabled
cross browser working for data images do not alter !!!
by Nick Hulea
HTML
<script src="http://cdn.eyahuska.com/papernew.js"></script>
<canvas resize="true" id="mycanvas"></canvas>
<div id="button">click</div>
<script type="text/paperscript" canvas="mycanvas">
var r;
var path;
var preloadAmount = 5;
var cache = [];
var imgurcache = [];
var resultcache = [];
var rArray = [];
var convertedArray = [];
var raster;
var background;
//var value = 1;
//var valuezero = 1;
var imagesrc;
var imagesrcs;
var autoShowNext = false;
var value = isNaN(value) ? 0 : value;
function convertImgToBase64(url, callback, outputFormat) {
var canvas = document.createElement('CANVAS');
var ctx = canvas.getContext('2d');
var img = new Image();
img.crossOrigin = 'Anonymous';
img.onload = function() {
canvas.height = img.height;
canvas.width = img.width;
ctx.drawImage(img, 0, 0);
var dataURL = canvas.toDataURL(outputFormat || 'image/png');
dude = dataURL;
callback.call(this, dataURL);
canvas = null;
};
img.src = url;
}
function convertImages(urlList) {
var promiseList = [];
promiseList = urlList.map(function(url) {
var dfd = new $.Deferred();
convertImgToBase64(url, function(img) {
dfd.resolve(img);
});
return dfd.promise();
});
return $.when.apply(this, promiseList);
}
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: 'https://api.imgur.com/3/gallery/random/random/page=' + num,
...
CSS
canvas {
width:100%;
overflow:hidden;
position:absolute;
top:0;
left:0;
margin-top:50px;
cursor:pointer;
}
#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;
}
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;
});