Question

在我的应用程序中，我正在尝试将div转换为 image 并下载。

这是我通常的div：

<div style="width:200px;height:200px;">
    <div style="width:100px;height:200px;float:left;">
        <img src="images/1.gif">
    </div>

    <div style="width:100px;height:200px;float:left;">
        <h1>Text comes here</h1>
    </div>
</div>

我的div通常包含一个gif图片，而我正在使用HTML2CANVAS进行转化。这是我将HTML转换为图片的代码：

$('.toimage').click(function(){
  html2canvas($('#myDiv'), {
    onrendered: function(canvas) {
      var img = canvas.toDataURL('image/gif');
      console.log(img);
      saveAs(canvas.toDataURL(), 'file.gif');
      // also tested with the code below    
      // saveAs(img, 'file.gif');
    }
  });
});

function saveAs(uri, filename) {
  var link = document.createElement('a');
  if (typeof link.download === 'string') {
    link.href = uri;
    link.download = filename;

    //Firefox requires the link to be in the body
    document.body.appendChild(link);

    //simulate click
    link.click();

    //remove the link when done
    document.body.removeChild(link);
  } else {
    window.open(uri);
  }
}

在gif动画旁边，一切正常。我已经知道在chrome，firefox和Opera等浏览器中，浏览器会忽略canvas.toDataURL('image/gif')并运行canvas.toDataURL('image/png')，因此代码应为：data:image/png;base64而不是data:image/gif;base64。

但是我在更多的浏览器上进行了测试，只有真正运行data:image/gif;base64的浏览器是 Safari ，但是我的问题是，即使div已被转换为{{1 }}我的图像丢失了 data:image/gif;base64包含的动画，只显示了第一帧。

基本上，我希望拥有/保留动画到图像上，并且仅使用支持该功能的任何浏览器。

感谢您的帮助和反馈，并在此先感谢您！

将html转换为图像/画布时，如何使GIF动画工作

0 个答案: