html2canvas icon indicating copy to clipboard operation
html2canvas copied to clipboard

浏览器字体大小修改,文本行高绘制出来不对,求解

Open zhuhai-1999 opened this issue 2 years ago • 2 comments

修改浏览器大小的字体为大或者超大字体会变大并且向下偏移,使用rem布局后调节根节点大小,在页面上字体行高都正常,但是绘制出来的海报就是向下偏移

字体正常: normal

字体超大: bigger

字体超小: smaller

观察了发现是绘制字体时baseline这个字段值有差异,找到他的构成是这个地方span.offsetTop是一样的,img.offsetTop是不同的,但是我实在弄不懂这个参数是怎么形成的,如何影响他,有大佬知道怎么解决吗,这个如果放在移动端应该算是比较大概率会碰到的问题吧 code

  • html2canvas version tested with:1.4.1
  • Browser & version:qq浏览器,小米浏览器,华为浏览器等手机上能调节字体大小的浏览器应该都有
  • Operating system:

zhuhai-1999 avatar May 16 '22 02:05 zhuhai-1999

遇到同样的问题了, 求解

seawenzhu avatar Jul 07 '22 11:07 seawenzhu

const style = document.createElement('style');
document.head.appendChild(style);
style.sheet?.insertRule('body > div:last-child img { display: inline-block; }');

html2canvas(element).then(canvas => {
  style.remove();
});

thomasliew avatar Apr 01 '24 06:04 thomasliew