如何將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 。