html2canvas , save render canvas as a gif instead of a png?

Question

I'm using html2canvas to save a snapshot from the webcam as an image.

However, it save only in png, I'm trying to save it as a gif, but can not find out how to do this

So far this is my function:

  renderCanvasImage: function(){
setTimeout(function () {

  // Add image with Quote to Canvas (hidden).
  html2canvas($('.snap'), {
    onrendered: function (canvas) {
      document.body.appendChild(canvas).id = 'hidden';
      var canvas = document.getElementById('hidden');

      var image = new Image();
      //Create a new Image with url
      image.src = canvas.toDataURL("image/.png");

      // Look at URI only and assign to localStorage
      imageURI = image.src;
      localStorage.setItem('image', imageURI);

      //****TODO better removal*/
      $('#cameraContainer, .wrapperInfo').hide();

      $('#result a, #result img').fadeOut(100).remove();
      $(image).appendTo('#result');
      $('#result').fadeIn(200);


      //Send Data to DB
      tibo.setData();

      //PopUp Message
      tibo.popupMsg();
    }
  });
}, 1000);

},

I tried to replace the following:

          image.src = canvas.toDataURL("image/.png");

By jpg of gif, but it doesn't change anything.... any tips to make this work will be amazing !!

Thanks a lot !!

try `image.src = canvas.toDataURL("image/png");` - without dot before png — Alexey G, Jun 03 '16 at 09:38
I just tried image.src = canvas.toDataURL("image/gif"); and image.src = canvas.toDataURL("image/jpg"); It still save in png... :( — tibewww, Jun 03 '16 at 09:39
hi, yes it works !! for gif aswell now !!! I may have do a typo, thanks a lot ! Other problem I m having is that when the image is saved as gif, the animation doenst happen . . .. Basically, the canvas created contain on snapshot from the webcam - and a .gif image which is animated - However, when the canvas is converted as a .gif, the gif image stop to be animated . . . .. Do you any tip to make this work ?? Thanks so much for your time, really appreciate ! — tibewww, Jun 03 '16 at 09:50
I found [this](http://stackoverflow.com/questions/10486084/generate-animated-gif-with-html5-canvas) — Alexey G, Jun 03 '16 at 10:02

score 2 · Accepted Answer · answered Jun 03 '16 at 10:00

You said in the comments above that you've got it working, however I still feel the need to tell you that the supported mime types of toDataUrl depend on the browser.

You can test it here https://jsfiddle.net/v91y0zqr/

Here's a visual example with even more mime types: http://kangax.github.io/jstests/toDataUrl_mime_type_test/

All browsers I've tested (Firefox, Chrome, Opera, IE) did support image/png and image/jpeg

Additionally, Chrome could export image/webp

Additionally, Firefox could export image/bmp

Results may differ for you.

So while in theory canvas.toDataURL("image/gif"); should create a GIF image, the browser may still decide to create a PNG (it's the default fallback).

You can read more about toDataUrl here: https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toDataURL

html2canvas , save render canvas as a gif instead of a png?

1 Answers1