将图像从html保存到画布

Question

我有以下代码可以在firefox中运行，但不能在chrome和ie。

中运行

我想要实现的是，单击#btnSave输入，将#widget div创建到画布中，然后要求用户将其保存为计算机上的图像。

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

             //save image
            canvas.toBlob(function(blob) {
                saveAs(blob, "image.png");
            });

            // Clean up 
            document.body.removeChild(canvas);
        }
    });
});

}）;

Answer 1

使用此polyfill使其在不支持开箱即用的浏览器中运行：https://github.com/blueimp/JavaScript-Canvas-to-Blob

canvas.toBlob()上的文档：

  

HTMLCanvasElement.toBlob（）方法创建一个Blob对象   表示画布中包含的图像;这个文件可能是   缓存在磁盘上或由用户自行决定存储在内存中   剂。如果未指定type，则图像类型为image / png。该   创建的图像的分辨率为96dpi。