html2canvas ，将渲染画布保存为 gif 而不是 png？

Posted 2023-03-25

【中文标题】html2canvas ，将渲染画布保存为 gif 而不是 png？

【英文标题】：html2canvas , save render canvas as a gif instead of a png?

【发布时间】：2016-10-03 07:25:54

【问题描述】：

我正在使用 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");

通过 gif 的 jpg，但它并没有改变任何东西....任何使这项工作的技巧都会很棒！

非常感谢！！

【问题讨论】：

试试image.src = canvas.toDataURL("image/png"); - png 前没有点

我刚试过 image.src = canvas.toDataURL("image/gif");和 image.src = canvas.toDataURL("image/jpg");它仍然保存在 png... :(

canvas.toDataURL('image/jpeg') 而不是 jpg？

嗨，是的，它有效！现在也为 gif ！我可能有错字，非常感谢！我遇到的其他问题是，当图像保存为 gif 时，动画不会发生。 . .. 基本上，创建的画布包含来自网络摄像头的快照 - 和 .gif 动画图像 - 但是，当画布转换为 .gif 时，gif 图像停止动画。 . . ..你有什么提示可以使这项工作吗？非常感谢您的宝贵时间，非常感谢！

我找到了this

【参考方案1】：

你在上面的 cmets 中说你已经让它工作了，但是我仍然觉得有必要告诉你 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