使用 html2canvas 在 keyup 和 keypress 上转换为图像

Question

我正在构建一个应用程序，用户可以在其中写一些东西input，然后它会被转换成可以下载的图像。

我使用 html2canvas.js 将文本转换为可下载的图像 （这部分工作正常）

目前它将 <div id="talltweets"></div> 中的文本转换为图像，但是我想要的是能够在 text/image 时更改 text/image在 input.

中写入文本

我试图制作一个名为 edValueKeyPress 的 function，它将 input 中的内容添加到 <div id="talltweets"></div>，现在如何把 #talltweets 里面的文字添加到 <img id="textScreenshot"/> in realtime/when writing?

这是我的代码：

   html2canvas(document.getElementById("talltweets"), {
     onrendered: function(canvas) {
       var screenshot = canvas.toDataURL("image/png");
       document.getElementById("textScreenshot").setAttribute("src", screenshot);
     }
   });
 
 function edValueKeyPress() {
   var edValue = document.getElementById("body");
   var s = edValue.value;

   var lblValue = document.getElementById("talltweets");
   lblValue.innerText = s;

 }

<script src="http://files.codepedia.info/uploads/iScripts/html2canvas.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script>



<input type="text" onKeyPress="edValueKeyPress()" onKeyUp="edValueKeyPress()" id="body">


<div id="talltweets"></div>
<!-- The PNG image will be added here-->
<div>
  <img id="textScreenshot" />
</div>

Answer 1

基本上，您需要将整个渲染步骤包装到一个函数中，然后可以使用按键事件调用该函数。你已经在正确的轨道上了——这是你可以实现它的一种方法（加上一些杂项代码改进；另外，我不得不更改 html2canvas 的 URL 以从不同的 cdn 中提取，因为原来的是'从 SO 正确加载):

// If we store these, we only need to query the dom once, not on every update
var tallTweets = document.getElementById('talltweets');
var screenshotImg = document.getElementById('textScreenshot');
var textInput = document.getElementById('body');


// Note - it wouldn't surprise me if html2canvas has a specific API
// for doing this kind of update. Worth checking their documentation for.
function updateImage() {
   html2canvas(tallTweets, {
     onrendered: function(canvas) {
       var screenshot = canvas.toDataURL("image/png");
       screenshotImg.setAttribute("src", screenshot);
     }
   });
};
 
function edValueKeyPress() {
 tallTweets.innerText = textInput.value || '';
 updateImage();
}

updateImage();

<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script>

<input type="text" onKeyPress="edValueKeyPress()" onKeyUp="edValueKeyPress()" id="body" placeholder="Type something!">

<div id="talltweets"></div>
<!-- The PNG image will be added here-->
<div>
  <img id="textScreenshot" alt="Generated screenshot" />
</div>

您还可以通过将两个函数合并为一个来使其更简单 - IE，将 tallTweets.innerText = textInput.value 移动到 updateImage，然后将事件侦听器绑定到 updateImage。但是将它们分开有其优点，特别是如果您可能想在其他地方重用 updateImage。

使用 html2canvas 在 keyup 和 keypress 上转换为图像

Using html2canvas to convert to image on keyup & keypress

html

javascript

converter

html2canvas