我正在使用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组成,但是它什么都没有改变。

非常感谢 !!

最佳答案

您在上面的评论中说已经可以正常使用了,但是我仍然需要告诉您,受支持的toDataUrl MIME类型取决于浏览器。

您可以在这里进行测试https://jsfiddle.net/v91y0zqr/

这是一个具有更多哑剧类型的视觉示例:http://kangax.github.io/jstests/toDataUrl_mime_type_test/

我测试过的所有浏览器(Firefox,Chrome,Opera,IE)都支持image/pngimage/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

关于javascript - html2canvas,将渲染 Canvas 另存为gif而不是png?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/37610813/

10-11 21:24
查看更多