niklasvh / html2canvas

Screenshots with JavaScript
https://html2canvas.hertzen.com/
MIT License
30.54k stars 4.8k forks source link

Screenshot offset problem, to solve. Refer to the following screenshot for details: #2769

Open webstager opened 2 years ago

webstager commented 2 years ago

I’m using the latest1.3.3

Bug reports:

Before screenshot

image

After screenshot

image

Specifications:

Srn5333 commented 2 years ago

Modify body line-height GFK6D%$NS4X QNMTI55UW}B image

webstager commented 2 years ago

Hello, I tried, but I still can't.

webstager commented 2 years ago

Hello, I tried, but I still can't.

Before screenshot image

After screenshot image

shinokada commented 2 years ago

I used line-height: 0 !important; in body. And reset line-height for other class/div.

It is very hacky. I hope the author is going to fix it soon.

webstager commented 2 years ago

I used line-height: 0 !important; in body. And reset line-height for other class/div.

It is very hacky. I hope the author is going to fix it soon.

same hope.

niklasvh commented 2 years ago

Could you please share a repro on jsfiddle.net?

webstager commented 2 years ago

Could you please share a repro on jsfiddle.net?

Hello, you can add placeholder text in input. Then use html2canvas to generate and see the performance. It will have text position offset. Reference Repro: https://codepen.io/xiang0308/pen/rNGZzGV

Please click download it to compare the position change of placeholder text before and after the image generated by html2canvas.

808brinks commented 2 years ago

Another reproduction 1.3.4: https://jsfiddle.net/6dfwc034/1/ In the screenshot you can see the text in the badge is shifted down by 1 or 2 pixels.

And reproduction for 1.4.0: https://jsfiddle.net/6dfwc034/2/

In my actual project the shift down is a lot more than the few pixels here but i'm not sure what is the cause of that.

sunnilyliu commented 2 years ago

调整body line-height GFK6D%$NS4X QNMTI55UW}B 图片

调整body line-height GFK6D%$NS4X QNMTI55UW}B 图片

有用 可以解决

webstager commented 2 years ago

调整body line-height GFK6D%$NS4X QNMTI55UW}B 图片

调整body line-height GFK6D%$NS4X QNMTI55UW}B 图片

有用 可以解决

你好,试了,不行。input框内的placeholder文本默认居中显示,但截图后依然发生偏移。 可参考我的codepen示例: https://codepen.io/xiang0308/pen/rNGZzGV

danielwong2268 commented 2 years ago

Any updates on this? Looks like there's several tickets opened regarding a similar issue, and some open PRs that might fix.

johanazhu commented 2 years ago

same question

prasid444 commented 2 years ago

Some PR claims that this error is fixed, but it's not merged yet. Any updates?

rsq1259 commented 1 year ago

Hello, I tried, but I still can't.

Before screenshot image

After screenshot image

一样的问题,你最后解决了吗

webstager commented 1 year ago

Hello, I tried, but I still can't.

Before screenshot image After screenshot image

一样的问题,你最后解决了吗

h2c没有解决,最后换方案了,用webrtc解决了

rsq1259 commented 1 year ago

Hello, I tried, but I still can't.

Before screenshot image After screenshot image

一样的问题,你最后解决了吗

h2c没有解决,最后换方案了,用webrtc解决了

我找到原因了 是这里获取input框字体大小的时候取的数组位置不对,应该取[1,2],但实际取了[0,1] 这就导致所有Input类型的元素都默认12px字体大小给的baseline https://github.com/niklasvh/html2canvas/blob/master/src/render/canvas/canvas-renderer.ts#L391

回复之后才发现@ohaibbq 已经提交了合并请求,希望这个bug被尽快合并吧