解决使用html2canvas时候出现text-decoration: underline下划线生成后汉字超出被下划线遮挡

最新推荐文章于 2024-05-03 11:08:18 发布
最新推荐文章于 2024-05-03 11:08:18 发布
阅读量1k 收藏 2
点赞数 1
分类专栏： 报错本 前端 文章标签： javascript 前端 bug
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_33950912/article/details/129925403
版权

场景：

在使用html2canvas生成pdf的时候发现 下划线 生成后出现被遮挡的情况
在这里插入图片描述
在网上搜索后发现 网上解决办法都是使用border-bottom代替 但是这样的弊端就是如果文字换行就不能给第一行显示下划线了（可判断生成多个元素下划线但是太麻烦了）

排查：

在issues中搜索发现18年就已经有人提过这个bug但当时就已经修复, 在仔细观察后发现 数字与字母 并没有超出，于是怀疑是字体原因或者字体基准线问题 测试后发现字体没问题 可以确定生成的时候 基准线 有问题 ， 打开html2canvas源码后发现
html2canvas.js

解决：

查看源码后很显然， 在生成的时候固定将文字基准线设置为 alphabetic （字母）， 此时只要改为 ideographic 即可
html2canvas.js
html2canvas.js
如果是使用npm安装需要在node_modules中修改后 复制到项目文件夹 改为 直接引入， 不然以后项目重新install要出问题的.

有空谁给html2canvas 提个代码多加个配置项就好了

后来的路
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Canvas-Sprite-Animations:一个功能强大、易于使用的 Sprite 动画库，专为 HTML5 Canvas 设计
07-24
Sprite.js 是一个功能强大、易于使用的 HTML5 Canvas 的 Sprite 动画库。 提供了两个类： SpriteMap ：管理一个精灵表中的多个动画序列。 Sprite ：处理单个动画序列。 您可以以获取对每种可用方法的完整说明。 用法 将脚本放在您的 HTML 文档中： < script src =" sprite.min.js " > </ script > 有几种使用 sprite.js 的方法。 最简单的： // Create the sprite. var sprite = new Sprite ( 'sprite.png' , { frameW : 60 , frameH : 60 , postInitCallback : function ( ) { // Runs when the sprite is ready. /
canvas-text-editor-tutorial:使用html5 canvas的简单文本编辑器
05-25
画布文本编辑器教程 为什么要写另一个编辑器？ 令人惊讶的是，您几乎找不到关于创建适当，快速且功能完整的纯文本编辑器的信息。 所有可用的信息要么很旧，不能指示最近的趋势，要么非常含糊和无益。 我将尝试通过创建一系列教程来解决此问题，以说明文本编辑器的所有重要方面，同时使用HTML5 canvas和许多JavaScript代码创建可用的应用程序。 以下是按优先级排列的编辑器功能要求列表： 键盘光标导航和选择； 鼠标光标导航和选择； 复制和粘贴支持； 简单的搜索和替换； 行号。 这些是技术要求： 足够快以处理至少100 kb的文本； 没有外部依赖性； 在所有现代浏览器中均可使用； 使用BDD或TDD构建。 我不打算具有以下任何功能来使任务更切合实际，因为这些主题中的每一个都有足够的问题来撰写有关以下内容的书： 支持RTL文本，象形文字和垂直文本； 搜索; 语法高
前端canvas项目实战——在线图文编辑器(七)：加粗、斜体、下划线、删除线（下）
石沉溪洞
03-20 810
上一篇博文中，我们实现了为文字添加和修改加粗、斜体、下划线、删除线。 这篇博文是《前端canvas项目实战——简历制作网站》付费专栏系列博文的第七篇——加粗、斜体、下划线、删除线（下），主要的内容有： 1. 在上一篇实现加粗、斜体、下划线和删除线等功能时遇到bug及其解决方案。 2. 在上一篇的实现中，我们发现了可以对数据进行优化的地方，降低数据存储和前后端传输的数据大小，减少浪费。
Html5-Canvas-Material-Design:在 Material Design 中使用 Html5、javascript 构建的简单 Html5 Canvas
06-07
简单的 HTML5 画布 特征 换画笔 更改油漆颜色 更改轮廓颜色 下载图片 清晰的图像 内置 html5 Javascript css3 爱和饼干
html-canvas-video-player：使用HTML canvas播放器在iPhone上播放嵌入式视频
03-03
折旧通知 这旨在用于在iOS上自动播放视频，但从iOS 10开始，存在本机支持的选项playsinline ，请在此处阅读更多信息： : playsinline （Android现在可以使用了很长时间）。 因此，该项目不再得到积极维护。 请使用本机HTML视频而不是它。 如果有人想接管维护工作，请随时提出一个问题，我将把您添加为贡献者。 HTML canvas视频播放器 在iPhone上内联播放视频的简单方法 简单的普通JavaScript类，用于在画布上播放视频。 IE9 +和现代浏览器，但仅适用于iPhone。 如果您正在使用此播放器，请告诉我，我想做一个小型展示柜，谢谢！ 感谢所有发出拉取请求的人。 。 变更日志 少量调整（感谢拉动请求） 添加了音频支持，并将时间线移到了主要的JS文件中 初始发行
HTML5 Canvas中实现文字链接
xuela-net
07-31 447
HTML5中没有关于链接的API，所以我们只有自己来实现了。 首先，我们来想一下，链接有什么特点。第一个想到的估计就是它能跳转，这是链接最显著的特点，当然这也是废话，要不怎么能叫链接？第二个想到的可能就是文字下方的下划线；第三可能就是当鼠标盘旋在它上空时，鼠标要变成一只手。这些都不难实现，因为跳转可以用window.open()来实现，下划线用html5 canvas API就能实现，更改鼠标的...
text-decoration装饰
小白girl
08-21 479
text-decoration装饰: text-decoration：none（默认） text-decoration：blink（闪烁） text-decoration：underline（下划线） text-decoration：line-through（贯穿线）类似于删除线 text-decoration：overline（上划线） &lt;!DOCTYPE html&gt;...
text-decoration设置文本下划线失效
woyidingshijingcheng的博客
01-13 3698
前言 最近公司的一项业务中涉及到了文本下划线的问题，本来对于我们来说，下划线并不是难点，可曾想过，这里也能踩坑。 下划线？ so easy! text-decoration: underline solid black; 加上这个，想都不用想 结果呢？ 细心的小同学应该发现问题了，这条下划线，中间出现了断裂，是的，你没看错 g j p q y 这几个字母显示不了下划线！ 这是什么鬼，之前不...
canvas画线
LLL_liuhui的博客
03-06 3241
效果如图： 1、html &lt;div&gt; &lt;canvas id="myCanvas" width="600" height="200" style="border: 1px solid #ccc;"&gt; 您的浏览器不支持canvas，请升级浏览器 &lt;/c
canvas基础（一）划线、调整字间距
w96098的博客
11-18 1377
声明canvas标签 <canvas id="can" width="500" height="500"> 如果不支持此标签的显示方式： </canvas> 基础动作：划线 const canvas = document.querySelector("#can"); const ctx = canvas.getContext("2d");//3d为webgl ctx.moveTo(100,100);//首先移动到某个点； ctx.lineTo(200,100);
canvas系列教程03 —— 线的样式、绘制文本、操作图片（图片的渲染、缩放、裁剪、切割、平铺、特效）、变换元素（平移、缩放、旋转）
朝阳39的博客
04-23 1711
线的样式 线宽 lineWidth lineWidth 是context对象的属性，用于描述线条的宽度，属性值为整数，默认值为1px。 strokeRect()方法绘制的矩形实际宽度是（width+lineWidth），实际高度是（height+lineWidth） arc()方法绘制的圆形实际半径为（radius+lineWidth）。 //lineWidth值为5 cxt.lineWidth = 5; cxt.mo.
html2canvas 与 jspdf 相结合生成 pdf 内容被截断的终极解决方案
11-20
html2canvas 与 jspdf 相结合生成 pdf 内容被截断的终极解决方案，设置背景色为白色，然后转成图片后，获取截断处图片像素点，从截断处往上一行行扫描像素点颜色，碰到这一行颜色都是全白的，代表是从这里开始截断，...
a标签去掉下划线，html，超链接去掉下划线
weixin_44450506的博客
12-20 2069
我们在HTML网页制作过程中，相信大家对css文本超链接这个概念并不陌生。我们都知道想要给某段文本或者指定元素添加一个锚点也就是超链接需要用到HTML中的a标签。 a{ text-decoration: none; } 大家主要掌握一个样式属性就是text-decoration: none;这个属性。给对应的a标签文本添加这个属性就可以去除文本超链接下划线了。 ...
解决文字和text-decoration:underline下划线重叠问题
aiyishengyishi的专栏
12-20 4376
解决文字和text-decoration：underline下划线重叠问题 1.border-bottom 2.box-shadow 3.background-image 4.text-decoration-skip指定覆盖关系 5.svg和canvas
HTML文本属性&颜色控制属性
在线学习web前端开发教程
12-16 934
一、文本装饰的属性 1.格式：text-decoration:underline; 2.取值： （1）underline代表下划线 （2）line-through代表删除线 （3）overline代表上划线 （4）none代表什么格式都没有（默认是这个属性） 注意：none的大多数用处在我们使用a标签的时候，可以用来去掉超级连接的下划线，可见下方演示 <head> <m...
html2canvas库使用中出现的问题及解决方案
热门推荐
kylin_zdd的专栏
09-28 1万+
html2canvas text-shadow 文本阴影 正则
HTML5基础加强css样式篇（text-align，text-decoration，text-indent，text-transform，letter-spacing，word-spacin）（四）
余正源的博客
03-07 1731
介绍： •text-align 对齐元素中的文本 •text-decoration 向文本添加修饰 •text-indent 缩进元素中文本的首行 •text-transform 控制元素中的字母 •letter-spacing 设置字符间距 •word-spacing 设置字间距 •white-space 设置元素中空白的处理方式   1.text-a
vue快速入门（五十）重定向
最新发布
不起眼小菜菜的博客
05-03 328
注释很详细，直接上代码……
Babel 原理浅析
qq_39454432的博客
04-29 813
Babel 原理浅析
html2canvas 与 box-shadow生成的下划线不兼容
05-25
HTML2Canvas 是一个将 HTML 元素转换为 Canvas 的 JavaScript 库，而 box-shadow 是 CSS 样式属性用于创建阴影效果的属性之一。这两个东西在本质上并没有联系，因此它们之间不存在兼容性问题。 可能你的意思是在使用 HTML2Canvas 时，如果要对元素应用 box-shadow 属性创建下划线，然后将该元素转换为 Canvas，会发现生成的下划线效果与原来的不同。这是因为 box-shadow 属性生成的阴影效果在转换为 Canvas 后无法被完全保留，导致下划线效果发生变化。 解决方案是使用其他方式创建下划线，例如使用 border-bottom 属性或者伪元素等方式，避免使用 box-shadow。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值