如何通过 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。 我认为它也支持其他一些图像格式。