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

Question

如何创建类似Facebook Badge的东西？ 涉及哪种技术？ 可以使用纯JavaScript完成吗？ 如果我的div包含一些内容，如何将其转换为图像以进行共享？

另请参阅Medium正在使用其新的共享功能做什么： https : //twitter.com/Medium/status/620651949529112576 。 选择文本时，它将生成一个包含所选文本的图形以进行共享。

Answer 1

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

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

因此，它在渲染canvas之前就已执行。

将此代码放在onrendered() 。

这是更新的小提琴 。

这是代码段。

 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 。