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);
  }
});

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