html2canvas icon indicating copy to clipboard operation
html2canvas copied to clipboard

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

Open webstager opened this issue 3 years ago • 17 comments

I’m using the latest1.3.3

Bug reports:

Before screenshot

image

After screenshot

image

Specifications:

  • html2canvas version tested with:
  • Browser & version: Google Chrome 95.0.4638.69
  • Operating system: macos

webstager avatar Dec 12 '21 07:12 webstager

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

Srn5333 avatar Dec 24 '21 09:12 Srn5333

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

webstager avatar Dec 25 '21 06:12 webstager

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

Before screenshot image

After screenshot image

webstager avatar Dec 25 '21 07:12 webstager

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.

shinokada avatar Dec 26 '21 04:12 shinokada

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.

webstager avatar Dec 26 '21 08:12 webstager

Could you please share a repro on jsfiddle.net?

niklasvh avatar Dec 29 '21 11:12 niklasvh

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.

webstager avatar Jan 09 '22 09:01 webstager

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.

808brinks avatar Jan 11 '22 10:01 808brinks

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

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

有用 可以解决

sunnilyliu avatar Mar 07 '22 05:03 sunnilyliu

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

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

有用 可以解决

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

webstager avatar Mar 08 '22 04:03 webstager

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

danielwong2268 avatar Jun 20 '22 04:06 danielwong2268

same question

johanazhu avatar Jul 05 '22 02:07 johanazhu

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

prasid444 avatar Jul 22 '22 06:07 prasid444

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

Before screenshot image

After screenshot image

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

rsq1259 avatar Nov 07 '22 07:11 rsq1259

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

Before screenshot image After screenshot image

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

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

webstager avatar Nov 07 '22 08:11 webstager

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被尽快合并吧

rsq1259 avatar Nov 17 '22 07:11 rsq1259