canvas transfer to gif meet problem

[ghost]

hi,I create a canvas element by reloading a remote script then i use your code transfer to gif for example get canvas element 2d context and gif.addFrame(canvasElement, {delay: 1000}); finally get a image of gif extension unfortunately the gif image could not show annimate effect I has seen your demo.first get canvas 2d context then add gif.addFrame(canvasElement, { delay: 1000 }); gif.on('finished', function(blob) { $("#canvasImage").attr("src",URL.createObjectURL(blob)); }); gif.render(); code segement but my canvas element has been created your idea that canvas element transfered to gif is getting 2d context and adding upper code segement in short getting 2d context and render gif need to operate at the same time i don't know it is wrong. code as it follows:

window.onload = function(){ var gif = new GIF({ workers: 4, workerScript: 'PUBLIC/js/gif.worker.js', quality: 15 }); var canvasElement = $("#anitOut canvas").eq(1)[0]; gif.addFrame(canvasElement, { delay: 1000}); gif.on('finished', function(blob) { $("#canvasImage").attr("src",URL.createObjectURL(blob)); }); gif.render(); };

online address: QQ登录界面

I'm looking forward to your reply. thank you,么么哒

[1j01]

If you only add one frame, you'll get a one frame animation. The "Usage" code sample here only covers adding single frames because there are many different ways you might want to get frames, for different use cases.

• If you're rendering a canvas animation just to make a GIF and you don't need or want to display the animation before the GIF is done rendering, you can render and add all the frames at once like in this example.
• If you want to capture a canvas when you don't have direct access to the animation loop, you can create a second loop with requestAnimationFrame or setInterval to add frame.
• If you have access to the animation loop and want to keep the animation canvas on the page, you can add the call to addFrame inside the animation loop.

For the last case, you can do something like this:

var gif = new GIF({
  workers: 4,
  workerScript: '__PUBLIC__/js/gif.worker.js',
  quality: 15
});
var animate = function(){
  requestAnimationFrame(animate);
  drawStuffTo(ctx);
  gif.addFrame(canvasElement, {delay: 1000/60});
};
animate();
var captureTime = 1000;
setTimeout(function(){
  gif.on('finished', function(blob) {
    $("#canvasImage").attr("src", URL.createObjectURL(blob));
  });
  gif.render();
}, captureTime);

[ghost]

thank you very much,you are so warm-hearted.it is so helpful

[princek64]

@1j01 I'm trying to capture the animation of canvas as a GIF output. But the output result I'm getting is still .png

Here is the code!

`const btnDisplay = document.querySelector('#btnDisplay'); const btnDownload = document.querySelector('#btnDownload'); const imgConverted = document.querySelector('#imgConverted'); const myCanvas = document.querySelector('#drawing_canvas');

let gif = new GIF({ workers: 4, workerScript: '/gif.worker.js', quality: 15 });

btnDisplay.addEventListener('click', function () { const dataURI = myCanvas.toDataURL(); console.log(dataURI); })

var animate = function() { gif.addFrame(myCanvas, { copy: true, delay: 1000/30 });
}; animate();

btnDownload.addEventListener('click', function (){ var captureTime = 5000; setTimeout(() => { gif.on('finished', function(blob) { const a = document.createElement('a'); a.href = myCanvas.toDataURL('blob/gif'); a.download = 'canvas-image.gif'; a.click(); }); gif.render(); }, captureTime); })`

[1j01]

@princek64 "blob/gif" is not a valid mime type. "image/gif" is but the API will return PNG ("image/png") when a format is not supported. Instead of myCanvas.toDataURL('blob/gif'), use URL.createObjectURL(blob) instead, so it's using the result that gif.js provides.

[prabhat13528]

Hi, I have a canvas over which I am drawing static images currently as shown in the screenshot(https://imgur.com/a/Ew9udSk) . But I also want to draw animated images over it. Below is the code snippet to draw the static images:

var canvas = document.createElement('canvas'); var ctx = canvas.getContext('2d'); canvas.width = WIDTH; canvas.height = HEIGHT; ctx.drawImage(connectorPointerImg, me.guidePos.x, me.guidePos.y, 33, 33); I am actually using the image as a cursor that's why the dynamic X and Y coordinates.

Below is what I am trying to use to draw the animated image(i.e. GIF ) :

var gif = new GIF({ repeat: 0, workers: 2, width: 33, height: 33, workerScript: process.env.PUBLIC_URL + '/gif.worker.js', quality: 10 }); gif.addFrame(expandImg , {delay:100 }); gif.render();

I haven't been able to get this to work, once I execute the above code below two things are happening:

1. No image is shown over the canvas as ideally the ctx(canvas context) draws the image over the canvas but in this case when i use the code: ctx.drawImage(expandImg, me.guidePos.x, me.guidePos.y, 33, 33); it renders a static image which is why I am trying to use the gif.js package.
2. The application crashes after a few seconds along with the DevTools.

Could you please guide me through the correct implementation of this?