We Keep Coding

how to convert Gif to spritesheet using Javascript

i am getting frames from gif using Libgif.
and then i am appending those frames in the div with Id = frames.
then i am taking those frames and trying to add each frames one after the other in canvas to make a spritesheet.
in the end i am getting an image in canvas but instead of getting different frames i am getting same image in the spritesheet.
Please help me find the issue.
I had taken canvas width 10000 assuming a gif wont have frames more than 100.
c = document.getElementById("myCanvas");
ctx = c.getContext("2d");
ctx.clearRect(0, 0, ctx.width, ctx.height);
ctx.beginPath();
var imageGiF = "";
var total = 0;
let canvasWidth = 0;
let canvasHeight = 0;
$('div.gifimage img').each(function(idx, img_tag) {
var total = 0;
if (/^.+\.gif$/.test($(img_tag).prop("src"))) {
var rub = new SuperGif({
gif: img_tag,
progressbar_height: 0
});
rub.load(function() {
for (let i = 0; i < rub.get_length(); i++) {
total += 1;
rub.move_to(i);
// var canvas = cloneCanvas(rub.get_canvas());
var canvas = rub.get_canvas().toDataURL("image/png");
img = $('<img id = "gifframe' + i + '"src= "' + canvas + '" class= frameimages>');
$("#frames").append(img);
}
var frameimages = document.getElementById("frames").querySelectorAll(".frameimages");
var totalimages = frameimages.length;
x = 0;
y = 0;
for (let i = 0; i < frameimages.length; i++) {
img = document.getElementById("gifframe" + i + "");
img.onload = function() {
ctx.drawImage(img, i * 100, 0, 100, 100);
total++;
console.log(total);
}
}
totalwidth = (total) * 100;
c.width = totalwidth;
c.height = 100;
setTimeout(() => {
imageGiF = c.toDataURL("image/png");
console.log(imageGiF);
// addBgimg(imageGiF)
}, 10);
});
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/buzzfeed/libgif-js/master/libgif.js"></script>
<div class="gifimage" id="placehere">
<img src="https://media1.giphy.com/media/bzUwzbxcvJ3XQlcnoi/giphy.gif" alt="">
</div>
<div id="frames" class="classGIF"></div>
<canvas id='myCanvas' width="10000" height="300"></canvas>

You were looping through the images, using img in your event handler.
However, this variable img in the outer scope was overridden by every loop, until it was finished looping through everything, then img was stuck on the last frame added.
Then when the event handler triggered, it added the last frame in every instance, because that was the value of img at that point. The loop was done before the images could load.
By adding it to it's own scope by wrapping it in a function, the variable is preserved.
I also modified your code to store the DOM img elements in an array, so you don't need expensive DOM lookups which makes your code a tad bit faster.
I added comments in the code to explain my changes.
c = document.getElementById("myCanvas");
ctx = c.getContext("2d");
ctx.clearRect(0, 0, ctx.width, ctx.height);
ctx.beginPath();
var imageGiF = "";
var total = 0;
let canvasWidth = 0;
let canvasHeight = 0;
$('div.gifimage img').each(function(idx, img_tag) {
var total = 0;
if (/^.+\.gif$/.test($(img_tag).prop("src"))) {
var rub = new SuperGif({
gif: img_tag,
progressbar_height: 0
});
rub.load(function() {
// An array for the image references
let images = [];
// Keep the reference to save on expensive DOM lookups every iteration.
let frames = $("#frames");
for (let i = 0; i < rub.get_length(); i++) {
total += 1;
rub.move_to(i);
// var canvas = cloneCanvas(rub.get_canvas());
var canvas = rub.get_canvas().toDataURL("image/png");
img = $('<img id = "gifframe' + i + '"src= "' + canvas + '" class="frameimages">');
// Use the reference to append the image.
frames.append(img);
// Add image to images array with the current index as the array index.
// Use the jQuery get method to get the actual DOM element.
images[i] = img.get(0);
}
var frameimages = document.getElementById("frames").querySelectorAll(".frameimages");
var totalimages = frameimages.length;
x = 0;
y = 0;
// Loop through all the images in the image array
// Using a scope so the reference to img won't be overridden.
images.forEach((img, index) => {
img.onload = () => {
ctx.drawImage(img, index * 100, 0, 100, 100);
total++;
console.log(total);
}
})
totalwidth = (total) * 100;
c.width = totalwidth;
c.height = 100;
setTimeout(() => {
imageGiF = c.toDataURL("image/png");
console.log(imageGiF);
// addBgimg(imageGiF)
}, 10);
});
}
});
#frames { display:none;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/buzzfeed/libgif-js/master/libgif.js"></script>
<div class="gifimage" id="placehere">
<img src="https://media1.giphy.com/media/bzUwzbxcvJ3XQlcnoi/giphy.gif" alt="">
</div>
<div id="frames" class="classGIF"></div>
<canvas id='myCanvas' width="10000" height="300"></canvas>

Similar images displaying using canvas

I am trying to display multiple images on canvas. The most recently added image on canvas must be draggable. This is the HTML code.
<canvas id="panoramaCanvas" width=1500 height=1000></canvas>
I am using an object to keep the track of already added images. Each time I drag Image on canvas then this method gets called. storeData stores currently added image data.
var storeData = []; // Object
var panoramaImg = new Image();
var imgNumber = 0;
function handleDrop(e) {
e.stopPropagation();
e.preventDefault();
//
var url = e.dataTransfer.getData('text/plain');
// for img elements, url is the img src so
// create an Image Object & draw to canvas
if (url) {
panoramaImg.onload = function () {
panoramaCtx.globalAlpha = 0.4;
panoramaCtx.drawImage(panoramaImg, 0, 0, this.width, this.height, 0, 0, 500, 500);
panoramaCtx.globalAlpha = 1.0;
storeData.push({
imgData: panoramaImg,
imgNo: imgNumber + 1,
xPoint: 0,
yPoint: 0,
});
imgNumber = imgNumber + 1;
}
//img.width, img.height, 0, 0, rangeWidth.value, rangeHeight.value
panoramaImg.src = url;
// for img file(s), read the file & draw to canvas
} else {
handleFiles(e.dataTransfer.files);
}
}
On mouse event this method is called.
var canvasOffset1 = $("#panoramaCanvas").offset();
var offsetX1 = canvasOffset1.left;
var offsetY1 = canvasOffset1.top;
var canvasWidth = panoramaCanvas.width;
var canvasHeight = panoramaCanvas.height;
var isDragging = false;
function handleMouseDownEvent(e) {
canMouseX = parseInt(e.clientX - offsetX1);
canMouseY = parseInt(e.clientY - offsetY1);
// set the drag flag
isDragging = true;
}
function handleMouseUpEvent(e) {
canMouseX = parseInt(e.clientX - offsetX1);
canMouseY = parseInt(e.clientY - offsetY1);
// clear the drag flag
isDragging = false;
}
function handleMouseOutEvent(e) {
canMouseX = parseInt(e.clientX - offsetX1);
canMouseY = parseInt(e.clientY - offsetY1);
// user has left the canvas, so clear the drag flag
//isDragging=false;
}
function handleMouseMoveEvent(e) {
canMouseX = parseInt(e.clientX - offsetX1);
canMouseY = parseInt(e.clientY - offsetY1);
// if the drag flag is set, clear the canvas and draw the image
if (isDragging) {
panoramaCtx.clearRect(0, 0, canvasWidth, canvasHeight);
panoramaCtx.globalAlpha = 0.4;
if (storeData.length > 1)
{
for (var i = 0; i <= storeData.length - 2; i++) {
panoramaCtx.drawImage(storeData[i].imgData, storeData[i].xPoint, storeData[i].yPoint,
500, 500);
}
}
panoramaCtx.drawImage(panoramaImg, canMouseX - 1128 / 2, canMouseY - 120 / 2, 500, 500);
panoramaCtx.globalAlpha = 1.0;
storeData[imgNumber - 1].xPoint = canMouseX - 1128 / 2;
storeData[imgNumber - 1].yPoint = canMouseY - 120 / 2;
console.log(storeData);
}
}
When I add first image everything works fine with mouse events but when I add second image the image data first change change to image data of second image.
When I tried to change the position of second second image and image data of first image changes.
Where am I doing wrong while displaying image?

You are creating a single HTMLImageElement panoramaImg. The imgData property of all your storeData members are thus the same and only HTMLImageElement which points to the last dropped image.
Simply create a new Image() in your drop handler instead of reusing the same.

Scrolling Pictures with javascript

I have written a javascript that is supposed to scroll pictures across the screen using canvas. I am unable to get this to work and would appreciate any help. I was able to get this to work using one picture and no Array but I want to be able to use an Array and load pictures one after another with a small space between them.
Here's a JSFiddle with my code.
var img = new Image[];
img[0] = new Image;
img[0].src = 'Images/Juniors.jpg';
img[1] = new Image;
img[1].src = 'Images/minis.jpg';
img[2] = new Image;
img[2].src = 'Images/senior.jpg';
var CanvasXSize = 1040;
var CanvasYSize = 240;
var speed = 40; //lower is faster
var scale = 1.05;
var y = -4.5; //vertical offset
var dx = 0.75;
var imgW;
var imgH;
var x = 0;
var clearX;
var clearY;
var ctx;
img.onload = function() {
imgW = img.width*scale;
imgH = img.height*scale;
if (imgW > CanvasXSize) { x = CanvasXSize-imgW; } // image larger than canvas
if (imgW > CanvasXSize) { clearX = imgW; } // image larger than canvas
else { clearX = CanvasXSize; }
if (imgH > CanvasYSize) { clearY = imgH; } // image larger than canvas
else { clearY = CanvasYSize; }
ctx = document.getElementById('canvas').getContext('2d'); //Get Canvas Element
}
function draw() {
//Clear Canvas
ctx.clearRect(0,0,clearX,clearY);
//If image is <= Canvas Size
if (imgW <= CanvasXSize) {
//reset, start from beginning
if (x > (CanvasXSize)) { x = 0; }
//draw aditional image
if (x > (CanvasXSize-imgW)) {
ctx.drawImage(img, x-CanvasXSize+1, y, imgW, imgH);
}
}
//If image is > Canvas Size
else {
//reset, start from beginning
if (x > (CanvasXSize)) { x = CanvasXSize-imgW; }
//draw aditional image
if (x > (CanvasXSize-imgW)) { ctx.drawImage(img[0],x-imgW+1,y,imgW,imgH); }
}
for(i = 0; i < img.length; i++) {
ctx.drawImage(img[i],x,y,imgW,imgH);
//amount to move
x += dx;
}
}

To have multiple images loaded when you need them, you shoud use image preloader code:
var imgs=[];
var imagesOK=0;
var imageURLs=[];
imageURLs.push("https://dl.dropboxusercontent.com/u/139992952/stackoverflow/house1.jpg");
imageURLs.push("https://dl.dropboxusercontent.com/u/139992952/stackoverflow/house2.jpg");
imageURLs.push("https://dl.dropboxusercontent.com/u/139992952/stackoverflow/house3.jpg");
loadAllImages();
function loadAllImages(){
for (var i = 0; i < imageURLs.length; i++) {
// put each image in the imgs array
var img = new Image();
imgs.push(img);
// after each image has been loaded, execute this function
img.onload = function(){
// add 1 to imagesOK
imagesOK++;
// if imagesOK equals the # of images in imgs
// we have successfully preloaded all images
// into imgs[]
if (imagesOK>=imageURLs.length ) {
// all loaded--start drawing the images
drawImages();
}
}; // end onload
img.src = imageURLs[i];
} // end for
}
At this point the images are all loaded, so draw the images
You can use context.translate and context.rotate to tilt your images.
What you do is translate (move) to the center of the image you want to rotate. Then do the rotation from that centerpoint. That way the image will rotate around its center. The rotate function takes a radian angle so you can translate degrees to radians like this: 30 degrees = 30 * Math.PI/180 radians
ctx.translate( left+width/2, topp+height/2 )
ctx.rotate( degrees*Math.PI/180 );
Then you draw your image offset by its centerpoint (remember you’re rotating around that centerpoint)
ctx.drawImage(img,0,0,img.width,img.height,-width/2,-height/2,width,height);
It’s a lot to wrap your head around so here’s example code and a Fiddle: http://jsfiddle.net/m1erickson/t49kU/
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<style>
body{ background-color: ivory; }
canvas{border:1px solid red;}
</style>
<script>
$(function(){
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var imgs=[];
var imagesOK=0;
var imageURLs=[];
imageURLs.push("https://dl.dropboxusercontent.com/u/139992952/stackoverflow/house1.jpg");
imageURLs.push("https://dl.dropboxusercontent.com/u/139992952/stackoverflow/house2.jpg");
imageURLs.push("https://dl.dropboxusercontent.com/u/139992952/stackoverflow/house3.jpg");
loadAllImages();
function loadAllImages(){
for (var i = 0; i < imageURLs.length; i++) {
var img = new Image();
imgs.push(img);
img.onload = function(){
imagesOK++;
if (imagesOK>=imageURLs.length ) {
drawImages();
}
}; // end onload
img.src = imageURLs[i];
} // end for
}
ctx.lineWidth=2;
var left=25;
var topp=30;
var width=100;
var height=100;
var rotations=[ -10, 0, 10 ];
function drawImages(){
for(var i=0;i<imgs.length;i++){
var img=imgs[i];
ctx.save()
ctx.beginPath();
ctx.translate( left+width/2, topp+height/2 )
ctx.rotate(rotations[i]*Math.PI/180);
ctx.drawImage(img,0,0,img.width,img.height,-width/2,-height/2,width,height);
ctx.rect(-width/2,-height/2,width,height);
ctx.stroke();
ctx.restore();
left+=125;
}
}
}); // end $(function(){});
</script>
</head>
<body>
<canvas id="canvas" width=400 height=200></canvas>
</body>
</html>

Images not loading on website

The problem I have is that when the page is loaded sometimes it displays all the images, sometimes just 2 images and sometimes all. I don´t know why this is happening.
Any ideas?
$('#banners .box img').each(function(index){
var randval = (index+1)*100;
var _this = $(this)
setTimeout(function(){
_this.attr('id' , 'banner' + index);
to_canvas('banner' + index, 300, 223);
}, randval)
});
to_canvas function:
function to_canvas(im,w,h){
var canvas;
var imageBottom;
var im_w = w;
var im_h = h;
var imgData;
var pix;
var pixcount = 0;
var paintrow = 0;
var multiplyColor = [70, 116, 145];
var x_offset = Math.floor(($('#'+im).attr('width') - im_w)/2);
var y_offset = Math.floor(($('#'+im).attr('height') - im_h)/2);
imageBottom = document.getElementById(im);
canvas = document.createElement('canvas');
canvas.width = im_w;
canvas.height = im_h;
imageBottom.parentNode.insertBefore(canvas, imageBottom);
ctx = canvas.getContext('2d');
ctx.drawImage(imageBottom, -x_offset , -y_offset);
imgData = ctx.getImageData(0, 0, canvas.width, canvas.height);
pix = imgData.data;
for (var i = 0 ; i < pix.length; i += 4) {
if(pixcount > im_w - (im_h - paintrow) ){
pix[i ] = multiply(multiplyColor[0], pix[i ]);
pix[i+1] = multiply(multiplyColor[1], pix[i+1]);
pix[i+2] = multiply(multiplyColor[2], pix[i+2]);
}
if(pixcount < im_w-1){
pixcount++;
}else{
paintrow++;
pixcount = 0;
}
}
ctx.putImageData(imgData, 0, 0);
$('#'+im).remove();
}
function multiply(topValue, bottomValue){
return topValue * bottomValue / 255;
}
I'm using the canvas function to add a triangle with multiply effect (like Photoshop).

Make sure the images are loaded :
$('#banners .box img').each(function(index, elem){
var randval = (index+1)*100,
self = this,
img = new Image(); // create image object
img.onload = function() { // wait until it's loaded
setTimeout(function(){
self.id = 'banner' + index;
to_canvas('banner' + index, 300, 223);
}, randval)
}
img.src = elem.src; // set source to same as elem
});

Wrap it all in this code to make sure the images are loaded before you execute your script. When you initially load your page, it caches the images(stores them in temp memory), but not before all your elements are rendered. When you reload, it reads the images from the cache–which is much faster than refetching the images again from the server–and therefore the images load about the same time everything else does. This results in visible images.
Like I said, to get your page to work, make sure everything is loaded, then run your script.
$(window).load(function(){
...your scripts(you can exclude functions definitions from this scope)
}

Canvas multiply hover effect

I´m trying to make a hover multiply effect over an image. I´m following this tutorial:
Demo:
http://albertogasparin.it/demo/multiply-filter/
http://albertogasparin.it/articles/2011/05/html5-multiply-filter-canvas/
The problem I have is that I don´t know how to pass to function so it works just on hover over the "id="multiply_hover", because right now the multiply filter is shown after page load.
This is my markup:
<div class="item">
<img id="multiply_hover" src="img/coleccionesII_1.jpg" alt="coleccionesII_1" width="195" height="343">
<div class="item_info">
<div class="item_text">
SEDA BLOUSE BOLSILLOS
CREP PANTALÓN
Zapato Rojo
</div>
</div>
</div>
With this script:
var multiplyFilter = (function() {
//** private vars **//
var multiplyColor,
imageBottom, imageId,
canvas;
//** private functions **//
function createCanvas() {
canvas = document.createElement('canvas');
canvas.width = imageBottom.width;
canvas.height = imageBottom.height;
imageBottom.parentNode.insertBefore(canvas, imageBottom);
// no canvas support?
if (!canvas.getContext) { return; }
draw();
}
function draw() {
var context, imgData, pix,
w = imageBottom.width,
h = imageBottom.height;
// get 2d context
context = canvas.getContext('2d');
// draw the image on the canvas
context.drawImage(imageBottom, 0, 0);
// Get the CanvasPixelArray from the given coordinates and dimensions.
imgData = context.getImageData(0, 0, w, h);
pix = imgData.data;
// Loop over each pixel and change the color.
for (var i = 0, n = pix.length; i < n; i += 4) {
pix[i ] = multiplyPixels(multiplyColor[0], pix[i ]); // red
pix[i+1] = multiplyPixels(multiplyColor[1], pix[i+1]); // green
pix[i+2] = multiplyPixels(multiplyColor[2], pix[i+2]); // blue
// pix[i+3] is alpha channel (ignored)
// another check to see if image is still empty
if(i < 5 && !pix[i] && !pix[i+1] && !pix[i+2] && !pix[i+3]) {
canvas.parentNode.removeChild(canvas);
setTimeout(function() { multiplyFilter.init(imageId, multiplyColor); }, 500);
return false;
}
}
// Draw the result on the canvas
context.putImageData(imgData, 0, 0);
}
//** helper function **//
function multiplyPixels(topValue, bottomValue) {
// the multiply formula
return topValue * bottomValue / 255;
}
//** public functions **//
return {
init : function(imgId, color) {
imageId = imgId;
imageBottom = document.getElementById(imageId);
multiplyColor = color;
// lauch the draw function as soon as the image is loaded
if(imageBottom && imageBottom.clientWidth > 50) { // image loaded
createCanvas();
} else { // not yet ready
setTimeout(function() { multiplyFilter.init(imageId, color); }, 1000);
}
}
}
})();
multiplyFilter.init('multiply_hover', [0, 0, 210]);
I tried using something like this, which on hover works but not well at all, cause it creates on every hover a new canvas element:
// Hover effect
$(".item").bind('mouseenter', function() {
$(this).children(".item_info").fadeIn();
multiplyFilter.init('multiply_hover', [0, 0, 210]);
});
$(".item").bind('mouseleave', function() {
$(this).children(".item_info").fadeOut();
});
Any ideas on how to properly pass the function on hover ?

Try this code:
<!DOCTYPE html>
<html>
<body>
<div class="item">
<img id="multiply_hover" src="img/coleccionesII_1.jpg" alt="coleccionesII_1">
<div class="item_info">
<div class="item_text">
SEDA BLOUSE BOLSILLOS
CREP PANTALÓN
Zapato Rojo
</div>
</div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
var multiplyFilter = (function() {
//** private vars **//
var multiplyColor,
imageBottom, imageId,
canvas;
//** private functions **//
function createCanvas() {
canvas = document.createElement('canvas');
canvas.width = imageBottom.width;
canvas.height = imageBottom.height;
imageBottom.parentNode.insertBefore(canvas, imageBottom);
// no canvas support?
if (!canvas.getContext) { return; }
draw();
}
function draw() {
var context, imgData, pix,
w = imageBottom.width,
h = imageBottom.height;
// get 2d context
context = canvas.getContext('2d');
// draw the image on the canvas
context.drawImage(imageBottom, 0, 0);
// Get the CanvasPixelArray from the given coordinates and dimensions.
imgData = context.getImageData(0, 0, w, h);
pix = imgData.data;
// Loop over each pixel and change the color.
for (var i = 0, n = pix.length; i < n; i += 4) {
pix[i ] = multiplyPixels(multiplyColor[0], pix[i ]); // red
pix[i+1] = multiplyPixels(multiplyColor[1], pix[i+1]); // green
pix[i+2] = multiplyPixels(multiplyColor[2], pix[i+2]); // blue
// pix[i+3] is alpha channel (ignored)
// another check to see if image is still empty
if(i < 5 && !pix[i] && !pix[i+1] && !pix[i+2] && !pix[i+3]) {
canvas.parentNode.removeChild(canvas);
setTimeout(function() { multiplyFilter.init(imageId, multiplyColor); }, 500);
return false;
}
}
// Draw the result on the canvas
context.putImageData(imgData, 0, 0);
}
//** helper function **//
function multiplyPixels(topValue, bottomValue) {
// the multiply formula
return topValue * bottomValue / 255;
}
//** public functions **//
return {
init : function(imgId, color) {
imageId = imgId;
imageBottom = document.getElementById(imageId);
multiplyColor = color;
// lauch the draw function as soon as the image is loaded
if(imageBottom && imageBottom.clientWidth > 50) { // image loaded
createCanvas();
} else { // not yet ready
setTimeout(function() { multiplyFilter.init(imageId, color); }, 1000);
}
//Hide the original image
$('#'+imgId).hide();
}
}
})();
// Hover effect
$(".item").bind('mouseenter', function() {
$(this).children(".item_info").fadeIn();
multiplyFilter.init('multiply_hover', [0, 0, 210]);
});
$(".item").bind('mouseleave', function() {
$(this).children(".item_info").fadeOut();
$('canvas').hide(); //hide the canvas
$('#multiply_hover').show(); //show the original image
});
</script>
</body>
</html>
I modified the multiply script to make it hide the original image, and the hover effect to make it hide the canvas and show the original image

Do you try this http://api.jquery.com/hover/ ?
You can use this to add a function to $("#multiply_hover"). Hover Jquery has handler IN and OUT