Question

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

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

目前，它会将<div id="talltweets"></div>内的文字转换为图片，但我想要的是在{{1}内写文字时能够更改文字/图片}。

我尝试制作一个名为input的{{1}}，它会在function中包含哪些内容并将其添加到edValueKeyPress，现在怎么能我将input内的文字实时添加到<div id="talltweets"></div> ，并在撰写时将其添加到？

这是我的代码：

#talltweets

<img id="textScreenshot"/>

Answer 1

基本上，您需要将流程的整个渲染步骤包装到一个函数中，然后可以使用keypress事件调用该函数。你已经走上了正确的轨道 - 这是你可以实现这一目标的一种方式（加上一些杂项代码改进;另外，我必须更改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＆amp;上的图像按键

1 个答案: