Javascript 使用html2canvas在键盘上转换为图像&；按键

我正在构建一个应用程序，用户可以在

input

中编写一些内容，并将其转换为可以下载的图像

我使用

html2canvas.js

将文本转换为可下载的图像（这部分工作正常）

目前，它将

中的文本转换为图像，但是我想要的是在

输入中写入文本时能够更改文本/图像

我试图创建一个名为
edValueKeyPress
的
函数，它获取
输入中的内容并将其添加到
，现在如何获取
中的文本并将其添加到

基本上，您需要将整个过程的渲染步骤包装到一个函数中，然后通过按键事件调用该函数。您已经走上了正确的道路-这里有一种方法可以实现这一点（加上一些杂项代码改进；此外，我不得不更改html2canvas的URL以从不同的cdn中提取，因为原始的cdn无法从其他cdn中正确加载）：


//如果我们存储这些，我们只需要查询dom一次，而不是每次更新都要查询
var-tallTweets=document.getElementById（'tallTweets'）；
var screenshotImg=document.getElementById（'textScreenshot'）；
var textInput=document.getElementById（'body'）；
//注意——如果html2canvas有一个特定的API，我不会感到惊讶
//为了做这种更新。值得检查他们的文档。
函数updateImage（）{
html2canvas（推特{
onrendered：函数（画布）{
var screenshot=canvas.toDataURL（“image/png”）；
屏幕截图img.setAttribute（“src”，屏幕截图）；
}
});
};
函数edValueKeyPress（）{
tallTweets.innerText=textInput.value | |“”；
updateImage（）；
}
updateImage（）

将
html2canvas
包装成一个函数，然后在
edValueKeyPress（）的末尾调用此函数。
。就这样！非常感谢@jack:）