html2canvas + FileSaver 浏览器问题答案

【问题标题】：html2canvas + FileSaver browser issueshtml2canvas + FileSaver 浏览器问题
【发布时间】：2016-06-01 21:30:53
【问题描述】：

我目前正在使用 html2canvas 和 FileSaver，以便在单击按钮时保存生成的画布。将弹出一个对话框，用户可以选择保存图像的位置并根据需要重命名。它完美地工作......在Firefox中。我似乎无法让它在 Chrome、IE 或 Safari 中运行。

html2canvas 将发挥作用，并在所有这些浏览器中从 div 中创建图像。 FileSaver 对话框在上述浏览器中不起作用。

有什么想法吗？我附上了我的剧本。你可以在这里看到我的完整工作代码： https://jsfiddle.net/ticklishoctopus/556etja4/

脚本（在以前的 SO 帖子的帮助下）：

$(function () {
    $("#btnSave").click(function () {
       html2canvas($("#testbtn"), {
           onrendered: function (canvas) {
               theCanvas = canvas;
               document.body.appendChild(canvas);

               canvas.toBlob(function (blob) {
                   saveAs(blob, "testimage.jpg");
               });
            }
         });
     });
});

【问题讨论】：

标签： javascript jquery html2canvas filesaver.js

【解决方案1】：

Chrome 不支持实现 toBlob。改用这个： Possible Solution

【讨论】：

我试试看！我需要更改脚本中的任何内容吗？还是只导入这个库？
阅读说明。您可能需要使用库中所需的函数来更改标准函数。
我们必须阅读不同的东西，我看到了这个：“canvas-toBlob.js 在不原生支持的浏览器中实现了标准的 HTML5 canvas.toBlob() 和 canvas.toBlobHD() 方法它。canvas-toBlob.js 需要 Blob 支持才能运行，这并非在所有浏览器中都存在。Blob.js 是解决此问题的跨浏览器 Blob 实现。”没有真正的答案。