html2canvas ，将 render canvas 保存为 gif 而不是 png？

Question

我正在使用 html2canvas 将网络摄像头的快照保存为图像。

但是，它只保存为 png，我想将它保存为 gif，但找不到如何做到这一点

到目前为止这是我的功能：

  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);

},

我尝试替换以下内容：

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

通过 jpg 或 gif，但它不会改变任何东西....任何使这项工作成功的技巧都会很棒！！

非常感谢！！

Answer 1

你在上面的评论中说你已经成功了，但我仍然觉得有必要告诉你 toDataUrl 支持的 mime 类型取决于浏览器。

你可以在这里测试https://jsfiddle.net/v91y0zqr/

这是一个包含更多 MIME 类型的可视化示例：http://kangax.github.io/jstests/toDataUrl_mime_type_test/

我测试过的所有浏览器（Firefox、Chrome、Opera、IE）都支持 image/png 和 image/jpeg

此外，Chrome 可以导出 image/webp

此外，Firefox 可以导出 image/bmp

您的结果可能会有所不同。

因此，虽然理论上 canvas.toDataURL("image/gif"); 应该创建一个 GIF 图像，但浏览器可能仍会决定创建一个 PNG（这是默认的回退）。

您可以在此处阅读有关 toDataUrl 的更多信息：https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toDataURL

html2canvas ，将 render canvas 保存为 gif 而不是 png？

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

javascript

jquery

png

gif

html2canvas