Text in input or textarea not capturing text.

[hasanAli9t]

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.

[zhoubin-gz]

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

[niklasvh]

Fixed in 79e1c85

[hacknug]

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

[hasanAli9t]

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

[fetishcoin]

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.

[aarangara]

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

[senaytekle]

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

hi aarangara, can you please share more on how you were able to achieve the workaround? - did the text show in the text area with your approach in the image you captured? having the same issue in angular perhaps because angular is sanitizing the input text.

[AnatuGreen]

Please what exactly is the solution to this?

[AnatuGreen]

I checked that Github link provided but did not find the solution. However, I checked my CSS file and it happened that I gave a styling like this to my images:

 img {
  width: 100%;
  height: 100%;
}.

When I removed this styling, I started seeing the text on the capture.