Question

如何制作像Facebook徽章一样的东西？涉及哪种技术？可以使用纯JavaScript吗？如果我的div内有一些内容，我该如何将其转换为图片以供分享？

另请参阅Media使用其新共享功能执行的操作：https://twitter.com/Medium/status/620651949529112576。当您选择文本时，它会生成一个包含所选文本的共享图形。

Answer 1

您已将以下代码放在function onrendered()之外。

var dataURL = canvas.toDataURL();
console.log(dataURL);

由于它在canvas呈现之前执行。

将此代码放在onrendered()。

中

以下是更新后的fiddle。

以下是摘录。

function testScrnShot() {
  html2canvas(document.getElementById("testing"), {
    onrendered: function(canvas) {
      document.body.appendChild(canvas);
      var dataURL = canvas.toDataURL();
      console.log(dataURL);
    }
  });
}

#testing {
  font-family: Arial, sans-serif;
  background: #000;
  color: #fff;
  display: inline-block;
  padding: 1em;
  border-radius: 2px;
  cursor: pointer;
  margin: 1em;
}
canvas {
  float: right;
  margin: 1em;
}

<script src="https://github.com/niklasvh/html2canvas/releases/download/0.5.0-alpha1/html2canvas.js"></script>
<div id="testing" onclick="testScrnShot();"><strong>Hello</strong>, this is a test</div>

现在在控制台中打印data url。

如何将div中的内容转换为社交媒体共享的图像？

1 个答案: