html - 如何将 html 转换为图像以在 Facebook、Twitter、电子邮件或类似内容上分享

Question

我的网页上有一个 div 和一个共享按钮。当我单击共享按钮时，我希望能够共享该 div 的内容。我想通过发布该 div 的图像来做到这一点。有没有简单的方法可以将 html 转换为可以共享的图像。

Answer 1

正如另一张海报所回复的，您需要使用 Canvas 元素转换屏幕上的渲染。然而，海报所说的错误是因为这很困难，实际上通过使用 html2canvas javascript 库非常容易。

您可以在这里阅读更多相关信息:https://html2canvas.hertzen.com/

项目 github 位于:https://github.com/niklasvh/html2canvas

html2canvas 允许您将给定页面上的任何 div 转换为图像。图像数据存储后，您可以提交它或做任何您想做的事情。

它非常容易使用，例如:

html2canvas(document.body, {
  onrendered: function(canvas) {
    document.body.appendChild(canvas);
  }
});

上面的代码拍摄整个文档的快照并将其附加到所述文档的底部。这是一个简洁笨重的示例，但您会了解到它有多么容易使用。