Question

所以我使用html2canvas从表格生成图像。输出将放在画布中。我的问题是当用户点击“下载图像”按钮以便将图像下载到他们的计算机时该怎么办？

我已经谷歌某种方式去做了，但这一切都没有意义。没有代码显示如何检索数据图像然后将其下载到计算机。

有两种方法可以做到这一点：

仍然使用html2canvas将表格转换为图像然后使用jquery下载图像
使用另一种解决方案将表格转换为图像，然后使用c＃（代码隐藏）下载它

我该怎么办？或者你有其他解决方案吗？

编辑：我已经获得了数据网址，但我只能使用window.open（image_data_url）将图像发送到新标签页，而不是下载它。但一分钟前我找到了解决方案。您只需使用“a”标签，然后添加属性“download = [file_name.jpg]”并使用数据网址填充“href”值。但它仍然不是我想要的。 如果我使用它，我将需要两个按钮，用于将表格转换为图像的按钮和用于下载图像的按钮。有没有任何可能的解决方案单击你有数据网址，然后下载为图像？

编辑：以上解决方案无法在IE中使用。那么也许有另一种解决方案？

Answer 1

您可以使用html2canvas转换html元素，然后使用jQuery将其另存为本地图像。看看我的示例代码：

    $("#btnSave").click(function() {
        html2canvas($("#map"), {
                onrendered: function(canvas) {
                        theCanvas = canvas;
                        document.body.appendChild(canvas);
                        Canvas2Image.saveAsPNG(canvas);
                        $("#img-out").append(canvas);
                        // Clean up
                        //document.body.removeChild(canvas);
                }
        });
});

这里是真实的：http://www.nanonimos.com/drag-pin-ID-convert/

Answer 2

在画布上使用toDataURL或toBlob并链接到生成的url。使用toBlob时，需要在其上使用URL.createObjectURL（blob）。

我想知道你使用的是什么版本的谷歌，因为当我google“canvas get image” 随着代码片段的准备，我得到了很多结果。

像：

https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement#Example.3A_Getting_the_data-url_for_a_canvas

或

Can I get image from canvas element and use it in img src tag?

下载按钮点击从html2canvas生成的图像

2 个答案: