将图像从 html 保存到画布答案

【问题标题】：Saving image from html to canvas将图像从 html 保存到画布
【发布时间】：2016-04-10 03:06:37
【问题描述】：

我有以下代码在 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);
        }
    });
});

});

【问题讨论】：

标签： javascript

【解决方案1】：

使用这个 polyfill 让它在不支持它的浏览器中工作：https://github.com/blueimp/JavaScript-Canvas-to-Blob

canvas.toBlob() 上的文档：

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

【讨论】：