html2canvasを使用してキーアップとキー入力で画像に変換

Question

inputの中に何かを書くことができるアプリケーションを構築しています。ダウンロードできる画像に変換されます。

私は現在、それは私がしたいことはできるようにすることです <div id="talltweets"></div>内のテキストを取得し、画像に変換し、 しかし

（この部分は正常に動作します）ダウンロード可能な画像にテキストを変換するためのhtml2canvas.jsを使用

inputの中にテキストを書くときにテキスト/イメージを変更する。

私はどのように私は#talltweets内のテキストを取得し、を書くときに、リアルタイム/中<img id="textScreenshot"/>に追加することができ今、functionはedValueKeyPressと呼ばれ、それがinput内部でいただきまし取り、<div id="talltweets"></div>にそれを追加します作ってみましたか？

これは私のコードです：

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

基本的に、あなたは、KeyPressイベントを呼び出すことができる関数にプロセスの全体のレンダリングステップをラップする必要があります。あなたはすでに適切な軌道に乗っています - これを実装する方法の1つです（いくつかの雑多なコードの改良や、元のものが正しく読み込まれていないので別のcdnから引き出すhtml2canvasのURLを変更しなければなりませんでした）SOから： - updateImageにtallTweets.innerText = textInput.valueを移動し、IE、その後、代わりにupdateImageにイベントリスナーを結合

// 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>

また一つに二つの機能を組み合わせることで、それがさらに簡単に作ることができます。しかし、それらを分離しておくことは、他の場所でupdateImageを再利用したい場合に特に有利です。