單擊按鈕上的html2canvas下載生成的下載圖像

Question

所以我有使用html2canvas從表生成的圖像。 輸出將放置在畫布中。 我的問題是當用戶單擊“下載圖像”按鈕以便將圖像下載到他們的計算機時該怎么辦？

我已經用谷歌搜索了一些方法，但是所有這些都沒有意義。 沒有代碼顯示如何檢索數據圖像，然后將其下載到計算機。

有兩種方法可以做到這一點：

仍然使用html2canvas將表轉換為圖像，然后使用jquery下載圖像
使用另一種解決方案將表轉換為圖像，然后使用c＃（后面的代碼）下載它

那我該怎么辦？ 也許您還有其他解決方案？

編輯： 我已經有數據的url ，但我只能使用window.open（image_data_url）將圖像發送到新選項卡，而不能下載它。 但是一分鍾前，我找到了解決方案。 您可以只使用“ a”標簽，然后添加屬性“ download = [file_name.jpg]”，並使用數據網址填充“ href”值 。 但這仍然不是我想要的。 如果使用此按鈕，則需要兩個按鈕，用於將表格轉換為圖像的按鈕和用於下載圖像的按鈕 。 單擊一下，是否有任何可能的解決方法，您獲得了數據URL，然后將其下載為圖像？

編輯： 上面的解決方案不能在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/