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

【问题标题】：Using html2canvas to convert to image on keyup & keypress使用 html2canvas 在 keyup 和 keypress 上转换为图像
【发布时间】：2016-10-27 09:13:50
【问题描述】：

我正在构建一个应用程序，用户可以在其中写一些内容 input 并将其转换为他们可以下载的图像。

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

目前它采用<div id="talltweets"></div> 中的文本并将其转换为图像，但我想要的是能够在input 中写入文本时更改文本/图像。

我尝试创建一个名为edValueKeyPress 的function，它获取input 中的内容并将其添加到<div id="talltweets"></div>，现在我怎样才能获取#talltweets 中的文本并将其添加到<img id="textScreenshot"/>实时/写入时？

这是我的代码：

   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>

【问题讨论】：

把html2canvas包装成一个函数，然后在edValueKeyPress()的末尾调用这个函数。就是这样！

标签： javascript html converter html2canvas

【解决方案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。

【讨论】：

谢谢@jack :)