如何通過 JavaScript 截取元素？

Question

我正在構建一個漸變選擇器應用程序。 我想要的功能之一是將漸變保存為數字圖像（如果可能的話，.jpg）到用戶的 PC。 單擊按鈕時，它應該捕獲具有線性漸變屬性樣式的 div 並將其保存（經典另存為彈出模式）。 我已經嘗試了很多次，解決方案和示例，但都沒有奏效。 我想知道最簡單的解釋方法，如果可能的話，只能用普通的 JS（沒有 jQuery 等）。 對於某些情況，這里有一些參考資料：

頁

HTML：

<div class="gradient-div" id="gradient-div">

CSS：

background: linear-gradient(90deg, #4CA1AF, #C4E0E5);

* div 為height: 100vh; 僅出於此目的（因此用戶可以獲得最大分辨率的圖片），並且圖像中的導航是position: fixed;

JS 將漸變方向調整為一種顏色。

Answer 1

html2canvas可以為您做到這一點。 這是一個足夠簡單的庫，它獲取元素的內容並從中創建一個<canvas> 。 然后，您可以通過在 canvas 上調用.toDataURL('image/png')將其導出為 PNG。 我認為它也支持其他一些圖像格式。