create canvas and gif js/jquery working
by Guddu Kumar
HTML
<script src="http://aa8f47fcc01b7584f779-b57f388ffba74a9d5600392ce75da4b1.r13.cf2.rackcdn.com/AnimationFrame.js"></script>
<script src="http://aa8f47fcc01b7584f779-b57f388ffba74a9d5600392ce75da4b1.r13.cf2.rackcdn.com/gif.js"></script>
CSS
canvas {
margin:auto;
}
JavaScript
var r, path, raster, background, imagesrc;
var preloadAmount = 10;
var cache = [];
var imgurcache = [];
var rArray = [];
var convertedArray = [];
var ajaxlength = [];
var autoShowNext = false;
var loaded = false;
var value = isNaN(value) ? 0 : value;
var valueajax = isNaN(valueajax) ? 0 : valueajax;
var press = isNaN(press) ? 0 : press;
var cvs = document.getElementById("mycanvas");
var canvas_options_form = document.getElementById("canvas-options");
var canvas_filename = document.getElementById("canvas-filename");
var pre = document.getElementById("preloader");
var clearCanvas = false;
var animationFrame = new AnimationFrame(120);
var newCanvasOne, newCanvasTwo, newCtxOne, newCtxTwo;
var w = window.innerWidth / 2;
var h = window.innerHeight / 2;
var ct = [];
var g = [];
function extractToken(hash) {
var match = hash.match(/access_token=(\w+)/);
return !!match && match[1];
}
var num = Math.floor(Math.random() * 50);
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,
method: "GET",
headers: {
Authorization: authorization,
Accept: "application/json"
},
crossDomain: true,
data: {
image: localStorage.dataBase64,
type: "base64"
},
beforeSend: function () {
$("#preloader").css("display", "block");
},
success: handleData
});
function handleData(result) {
$.each(result.data, function (idx, image) {
if (result.data[idx].animated === true) if (result.data[idx].is_album === false) {
ajaxlength.push({
imageamount: valueajax++
...