Использование html2canvas для преобразования изображения в keyup & keypress

Question

Я создаю приложение, в котором пользователь может написать что-то внутри input, и он будет преобразован в изображение, которое они могут загрузить.

Я использую html2canvas.js для преобразования текста в виде загружаемого изображения (эта часть работает отлично)

В настоящее время взять текст внутри <div id="talltweets"></div> и преобразует его в изображение, но то, что я хочу, чтобы иметь возможность изменить текст/изображение при вводе текста внутри input.

Я пытался сделать function называется edValueKeyPress и он принимает WHATS внутри 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>

Answer 1

В принципе, вам нужно обернуть это целый шаг визуализации процесса в функцию, которая затем может быть вызван с событием нажатия клавиши. Вы уже на правильном пути - вот один из способов, которым вы могли бы это реализовать (плюс несколько различных улучшений кода, также мне пришлось изменить URL-адрес для html2canvas, чтобы вытащить из другого 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 в другом месте.