Search code examples
javascripthtmlconvertershtml2canvas

Using html2canvas to convert to image on keyup & keypress

I am building a application where user can write something inside input and it will be converted to a image they can download.

I use html2canvas.js for converting text to a downloadable image (this part works fine)

Currently it take the text inside <div id="talltweets"></div> and converts it to a image, but what I want is to be able to change the text/image when writing text inside input.

I tried to make a function called edValueKeyPress and it takes whats inside the input and adds it into <div id="talltweets"></div>, Now how can I take the text inside #talltweets and add it to <img id="textScreenshot"/> in realtime/when writing?

This is my code:

   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>

Solution

  • Basically, you need to wrap that whole rendering step of the process into a function that can then be called with the keypress event. You're already on the right track - here's one way you could implement this (plus a few miscellaneous code improvements; also, I had to change the URL for html2canvas to pull from a different cdn, as the original one wasn't loading correctly from 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>

    You could also make it even simpler by combining the two functions into one - IE, moving tallTweets.innerText = textInput.value into updateImage, and then binding the event listener to updateImage instead. But keeping them separated has its advantages, especially if you might want to reuse updateImage elsewhere.