将图像从html保存到画布

Saving image from html to canvas

本文关键字：保存 html 图像      更新时间：2024-04-08

我有以下代码，可以在firefox中使用，但不能在chrome和即中使用

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

$(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);
        }
    });
});

})；

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

画布上的文档。toBlob（）：

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

相关文章：