textarea cannot rendered correctly.

[zhoujun494]

Hi,
I was faced that textarea cannot break line with capturing
hopes give some help
thanks!

Specifications:

• html2canvas version tested with:1.0.0-rc.3
• Browser & version:latest version
• Operating system:win 10

[niklasvh]

Do you have an example?

[Amber-372]

Do you have an example?

Just an ordinary textarea that goes wrong.You Can try it.

[layik]

MacOS 10.14

html2canvas@1.0.0-rc.3

same behaviour as @HelenGiser's.

[662]

+1

[CodaxD]

I was able to reproduce this here
https://jsfiddle.net/a8st153g/

Text that would wrap is placed all on one line and becomes cut off
Using @HelenGiser example with line breaks, it places text all on the same line (as in the screenshot)

[byk04712]

same problem.

[lucasvocos]

Same problem

[RyoheiTomiyama]

same problem in rc5

[mtreitinger]

I have the same problem with rc5: The text is shown in one single line in the vertical middle of the text field.

[toucail]

Same problem with rc5: The text is shown in one single line in the vertical middle of the text field.

[nidi3]

See pull request #2132

[nidi3]

As long as this is not merged, a fixed version is available on npm as "@nidi/html2canvas": "1.0.0-rc.8"

[pliao1996]

As long as this is not merged, a fixed version is available on npm as "@nidi/html2canvas": "1.0.0-rc.8"

it works. thank you

[marcanw]

Hello
I have the same issue and I'd like to use this rc8 version in a pure js project asap.
How can I make it?
Thank you for your help

[wsj195328]

As long as this is not merged, a fixed version is available on npm as "@nidi/html2canvas": "1.0.0-rc.8"

When textarea element show muti lines, it will lost '\n', like:

---

AAAAAA\n
BBBB

finally, it shows:

---

AAAAAAB
BBB

[sstudebaker]

Please let me know how I can get rc8 version? I don't understand where to get - a fixed version is available on npm as "@nidi/html2canvas". I am working on an educational site that students are actually using for remote learning right now and I really need to get textarea working. Thanks for any help!

[nidi3]

add "@nidi/html2canvas": "1.0.0-rc.8" to the dependencies in package.json.

[sstudebaker]

I was able to find html2canvas 1.0.0-rc.7 at https://www.npmjs.com/package/@nidi/html2canvas but not rc.8... Am I missing something?

[J1445]

Hey @niklasvh , Any idea of merging #2132 request I see this is major PR for this repo as the existing functionality is broken somewhere and this patch is important for libraries which is dependent on this changes

Or please provide ETA for this changes to be released

thanks

[sstudebaker]

I tried the rc.7 version today and was unable to save the file. Not sure why. Just got spinning wheel that never completed.

[nidi3]

I see rc.8 on npmjs.com and I'm using it in my project, so it really is there :)
For the latest question: What exactly are you trying to do?

[sstudebaker]

I searched npmjs.com for "@nidi/html2canvas": "1.0.0-rc.8" but it tells me 0 packages found so I guess I don't know how to find it...

[nidi3]

@wsj195328 here's an example with newlines: http://jsfiddle.net/3knhoL1a/

[nidi3]

@sstudebaker just search for @nidi/html2canvas on npmjs.com or add "@nidi/html2canvas": "1.0.0-rc.8" to package.json.

[sstudebaker]

Here is my confusion - when I open the js file it says html2canvas 1.0.0-rc.7. so I guess I have the right one but it is not working for my script.

Save function is on this page: https://piclits.com/piclit/79/

If you create a piclit in freestyle mode and then save under Options (you would need to register) but newlines are not captured. I tried the newer js and it would not save - just kept spinning.

// ON SAVE CREATE IMAGE AND SAVE WORDS
$('.save').on(selectEvents, function() {
var button = $(this);
button.addClass('active');

        if (button.hasClass('active')) {
            disableFridge.addClass('active');
            focus_on_word_edit();
            html2canvas(document.querySelector(".fridge"), {
                onclone: function(document) {
                    document.querySelector(".fridge").style.borderRadius = "0px";
                }
            }).then(canvas => {
                var img = canvas.toDataURL('image/jpeg', 0.6);

                if ( piclitType === '2' ) {
                    var piclitWords = freestyleTextarea.val();
                } else if ( piclitType === '1' ) {
                    var piclitWords = [];
                    var wordCount = $('.fridge-word').length;
                    $('.fridge-word').each(function(){
                        var word = $(this);
                        var variants = [];
                        if ( word.find('.word-variants .variant-selector').length ) {
                            word.find('.word-variants .variant-selector').each(function() {
                                variants.push(
                                    $(this).find('span').text()
                                );
                            });
                        }
                        piclitWords.push({
                            current: word.find('.word-variants .variant-selector:first').find('span').text(),
                            part_of_speech: word.attr('data-partofspeech'),
                            variants: variants,
                            current_variant: word.attr('data-variant'),
                            capitalize: word.attr('data-capitalize'),
                            top: word.css('top'),
                            left: word.css('left')
                        });
                    });
                }

                var data = {
                    'action': 'save_piclit',
                    'img': img,
                    'post_type': ajax_object.post_type,
                    'post_id': ajax_object.post_id,
                    'piclit_type': piclitType,
                    'piclit_words': piclitWords,
                    'piclit_status': piclitStatus,
                    'piclit_id': piclitId
                };
                //console.log(data);
                $.post(ajax_object.ajax_url, data, function(response) {
                    window.location.href = response.data;
                    /*button.removeClass('active');
                    unfocus_edit_done();
                    disableFridge.removeClass('active');*/
                });
            });
        }
    });

The two attached files show the piclit in edit mode and then when saved.

[nidi3]

You are right about the version.
I published a new one 1.0.0-rc.11 which should work.

[sstudebaker]

Happy to report that it worked! THANK YOU! On Firefox, Safari and Chrome all latest versions. I am getting a shadow where I believe the text area ends? Maybe I just need to set height and width of the area.

[lifront]

As long as this is not merged, a fixed version is available on npm as "@nidi/html2canvas": "1.0.0-rc.8"

when will this version merge to niklasvh/html2canvas？

[ryantranvn]

@nidi3 Thanks for your support !
I have problem with string not space in Japanese like this image. In color textarea, when input, content auto break line, but on render, it show wrong. I also install version : @nidi/html2canvas@^1.0.0-rc.13 but it still error.

[mamtou]

replace textarea to container contenteditable!!!

[amitavamca]

As long as this is not merged, a fixed version is available on npm as "@nidi/html2canvas": "1.0.0-rc.8"

@nidi3, I did not get the fix. I added "@nidi/html2canvas": "1.0.0-rc.8" and "@nidi/html2canvas": "1.0.0-rc.11" in package.json file and run the command 'npm install' and 'npm run build'. Content of generated html2canvas.js exactly same as version 1.0.0-rc.7. Please suggest how to get version 1.0.0-rc.8 or higher.

[shotforsky]

replace textarea to container contenteditable!!!

Work like a charm! thanks @mamtou ~

[ghost]

Still not fixed?

[MikeDanilov]

@niklasvh is there any update on this issue?

[bartlomiejwulff]

Issue is still there in the latest version 1.3.2

[aarenstade]

replace textarea to container contenteditable!!!

this works but isn't ideal for virtual DOM libraries like react.
is there another workaround?

You are right about the version. I published a new one 1.0.0-rc.11 which should work.

this also didn't work for me.

[Orangestar12]

Will this ever be merged into the main branch? I'm experiencing an issue with the patch above that applies a padding to a textarea, cutting off text sometimes, and I don't want to submit further issues with the patch until it's merged into master.

[chawes13]

@aarenstade My workaround was to create a similarly styled div in its place:

html2Canvas(containerRef.current, {
  onClone: (clonedDocument) => {
    Array.from(clonedDocument.querySelectorAll('textarea')).forEach((textArea) => {
      const div = clonedDocument.createElement('div')
      div.innerText = textArea.value
      div.style.border = '1px solid #9b9b9b'
      div.style.padding = '0 10px'
      textArea.style.display = 'none'
      textArea.parentElement.append(div)
    })
  }
})

An added benefit to this approach is that it also avoids the issue of overflowing vertical content getting cut off

[ikiame]

After thinking about the same thing, I came to the following conclusion.
First, convert textarea to text and then capture.
And then convert it back to textarea. :)

example.txt

example site
http://www.wishparts.com/thyroid.html

[Sappurit]

v1.4.1 textarea still not support. So I recommend to switch to <div contenteditable="true">Your text.</div> and I think <div> is better than <textarea>. No need to adjust height too.

[quocuyvan]

still not support yet in v1.4.1 :<

[florton]

@chawes13 this worked great!

Only changes I had to make were changing onClone to onclone and using absolute positioning on the new element.

[vnijs]

Would be great to have this added. Curious if this issue might also be connected to:

#2166

#1595

@chawes13 It seems like you have found a great work around, as mentioned by @florton. Any chance you could comment on how to apply your approach to the first jsfiddle below? I hope that a similar approach may also work for Multi-select in the second js-fiddle below.

TextArea

https://jsfiddle.net/a8st153g/

Multi-select:

https://jsfiddle.net/Ldrq6zxk

[chawes13]

@vnijs Here you go:
TextArea
https://jsfiddle.net/0vt7k6yo/2/

The multiselect is a bit different - I think there might be a bug in the cloning process (as pointed out in #2166). I guess you could hack it a bit with the following. I can't say I recommend it though 😅.

https://jsfiddle.net/6zcxdop8/

[vnijs]

Thanks @chawes13! This was very helpful. The below seems to work for both #2008 and #2166. The only issue I haven't been able to figure out yet is how to keep the elements in the same order. See the example below where the "Data Filter" is added below the two other textAreas while it is listed first in the actual app. Do you perhaps know of a simple way to keep the elements in the same order?

Normal screenshot:

Screenshot from html2canvas:

function generate_screenshot() {
  html2canvas($("body")[0], {
    onclone: (clonedDocument) => {
      Array.from(clonedDocument.querySelectorAll('textarea')).forEach((textArea) => {
        if (textArea && textArea.value.length > 0) {
          const labelFor = textArea.getAttribute('id')
          const label = clonedDocument.querySelector(`label[for="${labelFor}"]`)
          const div = clonedDocument.createElement('div')
          div.innerText = textArea.value
          div.style.border = '1px solid #d3d3d3'
          div.style.padding = '10px 10px 10px 10px'
          div.style.width = '100%'
          div.style.borderRadius = "5px" // crashes screeshot generation
          div.style.boxSizing = 'border-box';
          div.style.margin = '0';
          div.style.backgroundColor = "white"
          textArea.style.display = 'none'
          textArea.parentElement.append(label, div)
        }
      })

      Array.from(clonedDocument.querySelectorAll('select[multiple]')).forEach((msel) => {
        const multiSelect = document.querySelector("#" + msel.getAttribute("id"));
        if (multiSelect && multiSelect.selectedOptions.length > 1) {
          const clonedMultiSelect = clonedDocument.querySelector("#" + msel.getAttribute("id"));
          const list = clonedDocument.createElement('ul')
          Array.from(multiSelect.selectedOptions).forEach((option) => {
            const item = clonedDocument.createElement('li')
            item.innerHTML = option.value
            item.style = "list-style: none; padding-left: 0.5em"
            item.style.width = '100%'
            list.appendChild(item)
          })
          list.style.border = '1px solid #d3d3d3'
          list.style.padding = '5px 5px 5px 5px'
          list.style.width = '100%'
          list.style.backgroundColor = 'white'
          list.style.borderRadius = "5px"
          clonedMultiSelect.style.display = 'none'
          clonedMultiSelect.parentElement.appendChild(list)
        }
      })
    }
  }).then(canvas => {
    var img = document.createElement("img");
    img.src = canvas.toDataURL("png");
    img.width = parseInt(canvas.style.width);
    img.height = parseInt(canvas.style.height);
    $("#screenshot_preview").empty();
    $("#screenshot_preview").append(img);
  });
}

[chawes13]

@vnijs You could wrap each of your text area elements in a containing element or you could use the replaceChild method instead of setting style.display = "none". Here's an example of the latter: https://jsfiddle.net/3sj5w8n7/

[vnijs]

Thanks @chawes13! Wrapping each text area in a containing elements works really well. I'm still missing one piece of the puzzle related to vertical cropping after after making adjustments during onclone so I posted a question on stackoverflow. Hopefully this will be useful to others that are run into this issue.

https://stackoverflow.com/questions/75576148/vertical-cropping-of-screenshot-after-applying-changes-during-onclone-html2canv

[angelolanche]

Thank you people :D

[fyyyyy]

Use div contenteditable instead of a textarea, works fine with html2canvas
https://stackoverflow.com/a/54566101

See fiddle https://jsfiddle.net/dkwnfh6v/

[piyush-sigmared]

Please resolve this issue