html2canvas
html2canvas copied to clipboard
niklasvh
textarea cannot rendered correctly.
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
Do you have an example?
Just an ordinary textarea that goes wrong.You Can try it.
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)
I have the same problem with rc5: The text is shown in one single line in the vertical middle of the text field.
Same problem with rc5: The text is shown in one single line in the vertical middle of the text field.
As long as this is not merged, a fixed version is available on npm as "@nidi/html2canvas": "1.0.0-rc.8"
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
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
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
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!
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?
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
I tried the rc.7 version today and was unable to save the file. Not sure why. Just got spinning wheel that never completed.
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?
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...
@sstudebaker just search for @nidi/html2canvas on npmjs.com or add "@nidi/html2canvas": "1.0.0-rc.8" to package.json.
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.
You are right about the version.
I published a new one 1.0.0-rc.11 which should work.
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.
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？
@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.
