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

通过gpg的jpg，但它并没有改变任何东西......任何使这项工作的提示都会令人惊叹!!

非常感谢!!

Answer 1

您在上面的评论中说过，您已经开始工作，但我仍然觉得有必要告诉您，toDataUrl支持的mime类型取决于浏览器。

您可以在此处https://jsfiddle.net/v91y0zqr/

进行测试

这是一个有更多哑剧类型的视觉示例：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，将渲染画布保存为gif而不是png？

1 个答案: