Html2canvas: Text in input or textarea not capturing text.

Created on 29 Dec 2017  路  6Comments  路  Source: niklasvh/html2canvas

Hello,
I am trying to capture div with image and textarea text(user input) in it. but it show me only image which is in div and showing blank text which is inside the same div. Cannot able to figure out how to capture text with latest version.
Thank you for any help!

I am trying to capture that on blur. when user input and focus out/blur it should capture text.

Here is code i am trying :
$(document).on('blur', '.image-text', function(event) {
var divTakeSnapshot = '.book-layouts';
var setTakenSnapshot = '.thumbnail-preview';
html2canvas($('.class').find('.div-class-to-take-snapshot').then(function(canvas) {
$('.class').find('.div-class-to-set-snapshot').attr('src', canvas.toDataURL("image/png"));
});

it capturing blank textarea. but showing image.

All 6 comments

I used the latest version of the test there is the same problem

Text's not showing up for me when capturing a textarea with 1.0.0-alpha.10. Was this actually fixed?

yes @hacknug it was fixed and still working for me. Please show us your snippet so that we can help you better.

Hi, @hasanAli9t
I also face with same problem now with 1.0.0-alpha.11.
Both input type="text" and textarea cannot rendered correctly.

JS

function screenshot(selector) {
    var element = $(selector)[0]; // get target element (div)
    html2canvas(element).then(function(canvas) {
    var imgData = canvas.toDataURL();
    $('#screen_image')[0].src = imgData;
    $('#download')[0].href = imgData;
    $('#download')[0].innerHTML = "Download";
    });
}

Full code is here:

Perhaps, canvas.toDataURL() should not be used?
same origin image cannot render too.

Thanks.

This not working for me as well, it captures the screenshot of input box but that does have the value typed into the box. As a workaround, I get the value from input box into a div and then capture that div

Was this page helpful?
0 / 5 - 0 ratings