下載從html2canvas生成的圖像按鈕點擊

所以我有圖像使用html2canvas生成的圖像。輸出將被放置在畫布上。我的問題是當用戶點擊「下載圖像」按鈕時該怎麼做，以便圖像可以下載到他們的電腦？下載從html2canvas生成的圖像按鈕點擊

我已經谷歌的一些方法來做到這一點，但它的一切都沒有任何意義。沒有代碼顯示如何檢索數據映像，然後將其下載到計算機。

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

仍然使用html2canvas錶轉換成圖像，然後使用jQuery下載圖像
使用另一種解決方案錶轉換成圖像，然後使用c＃（代碼後面）下載它

所以我應該怎麼做？或者你有其他解決方案？

編輯：我已經得到了數據網址，但我只能使用window.open（image_data_url）發送圖像到新標籤，而不是下載它。但是一分鐘前我找到了解決方案。您只需即可使用「a」標籤，然後添加屬性「download = [file_name.jpg]」，並填寫數據網址爲的「href」值。但仍然不是我想要的。 如果我使用這個，我將需要兩個按鈕，用於將表格轉換爲圖像的按鈕以及用於下載圖像的按鈕。是否有任何可能的解決方案，只需點擊一下你獲得的數據網址，然後將其下載爲圖像？

編輯：上述解決方案不能用於IE。所以也許有另一種解決方案？

來源

2014-01-16 user3152520

在畫布上使用toDataURL或toBlob並鏈接到生成的URL。使用toBlob時，需要使用URL.createObjectURL（blob））。

我想知道你使用的是什麼版本的谷歌，因爲當我谷歌「帆布獲取圖像」我得到了大量的結果準備使用密碼小節。

像：

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?

來源

2014-01-16 04:45:35

噢，我忘了寫下來，我已經得到了數據的URL。但我只是可以將圖像鏈接到新標籤，而不是下載它。但是一分鐘前，我找到了下載圖像的解決方案。只需使用「a」標籤並添加「下載」屬性並填充數據url的「href」值即可。但它仍然不是我想要的。我想要的是隻需點擊一下圖片就可以轉換，然後瀏覽器下載它。 – user3152520

您可以使用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/

來源

2015-12-08 02:44:41 Harkedian

'html2canvas'不是內置的JavaScript方法。如果它是圖書館的一部分，請在您的回答中鏈接 – MTCoster

好的。我忘了解釋這一點。 – Harkedian

下載從html2canvas生成的圖像按鈕點擊

回答

相關問題