使用html2canvas生成图片时遇到文字重叠问题

news/2025/1/11 18:08:04/文章来源:https://www.cnblogs.com/linhaisheng/p/18666066

在使用html2canvas.js插件生成图片时,如果文字中有特殊符合时,生成的图片会出现文字重叠的问题,例如这样。

 

后面发现是换行时英文特殊标点占位与文字占位不同导致该问题。

 

解决方法:为特殊字符添加【letter-spacing: 1px;】css。

如果把全部文字都加letter-spacing: 1px;会显得不好看,所以我们只需要把特殊字符加上【letter-spacing: 1px;】就可以了。

例如,把文字中的【/】加上一个span,class=letterspacingtext;该.letterspacingtext的css样式为【.letterspacingtext{letter-spacing: 1px;}】。

companyproductname =“这个是测试的/文字”

companyproductname = companyproductname.replace(/\//g, "<span class='letterspacingtext'>/</span>");

 

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/867845.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

BurpSuite之SQL 注入测试实操

1、安装:CO2插件进入【BurpSuite】---【拓展】---【BApp商店】,安装完成后,[已安装]列会有:√ 拦截后发送到【重放器】: 重发器中【请求】中操作:【拓展】---【CO2】---【发送到SQLMapper】 2、SQL注入 (1)操作登录 (2)进行拦截,发送给【重放器】: (3)修改name的…

《痞子衡嵌入式半月刊》 第 116 期

痞子衡嵌入式半月刊: 第 116 期这里分享嵌入式领域有用有趣的项目/工具以及一些热点新闻,农历年分二十四节气,希望在每个交节之日准时发布一期。 本期刊是开源项目(GitHub: JayHeng/pzh-mcu-bi-weekly),欢迎提交 issue,投稿或推荐你知道的嵌入式那些事儿。 上期回顾 :《…

【DNS攻防】深入探讨DNS数据包注入与DNS中毒攻击检测 (C/C++代码实现)

DNS数据包注入和DNS中毒攻击是网络安全领域中的两个重要主题。DNS(域名系统)是互联网中的一项核心服务,负责将域名转换为与之相对应的IP地址。 DNS数据包注入是指攻击者通过篡改或伪造DNS请求或响应数据包来干扰或破坏DNS服务的过程。攻击者可通过注入恶意数据包来改变DNS解…

代码随想录算法训练营第4天 | 24. 两两交换链表中的节点,19.删除链表的倒数第N个节点,面试题 02.07. 链表相交,142.环形链表II,链表总结篇

一、刷题部分 1.1 24. 两两交换链表中的节点原文链接:代码随想录 题目链接:24. 两两交换链表中的节点 - 力扣(LeetCode)1.1.1 题目描述 给你一个链表,两两交换其中相邻的节点,并返回交换后链表的头节点。你必须在不修改节点内部的值的情况下完成本题(即,只能进行节点交…

windows7老爷机安装蓝牙适配器遇到的坑

连续买了3个蓝牙接收器,都无法在我的win7电脑上使用,最后询问小二、加上自己上网查询,最终解决。 首先,安装蓝牙驱动,重启电脑。 然后,说明书上说,右下角的系统托盘理应有个蓝牙图标,但是我这里不显示,所以,要另寻它法。 右键点击网络图标,【打开网络和共享中心】看…

Ribbon XML Editor 2024.05.15

Ribbon XML Editor是一款自定义功能区的辅助工具。 最新版支持在Outlook、Publisher、Project、Visio等组件中预览。 下面是Excel中的效果。 下面是在Visio中创建自定义功能区的效果。PID绘制

深度强化学习

深度强化学习 表格来存储每一个状态state和Q值显然是不现实的,除了存储开销,搜索开销也非常巨大。深度强化学习(Deep Q Network)是强化学习与深度学习的结合,利用神经网络作为函数逼近器来解决高维或复杂状态空间下的强化学习问题。 其关键特征就是使用深度神经网络(DNN)…

接上文,卸载ib网卡、显卡驱动、coda

嗨嗨嗨 亲们!!小橘又来啦,今天分享的干货是卸载 ib 网卡、显卡驱动、coda,昨天咱们学习了安装,有啥不明白的欢迎留言,我会知无不答。言归正传,当宝子们需要升级ib网卡、显卡驱动、coda时,先把旧版本的卸载后再安装新版本!

Windows下Dll在Unity中使用的一般方式

Unity中虽然已经有广泛的库和插件,但是相较于C++的库生态而言,还是有一定的差距;因此本篇博文记录Windows下将C++函数打包成动态链接库在Unity中使用的一般方法。Windows下Dll在Unity中使用的一般方式 Unity中虽然已经有广泛的库和插件,但是相较于C++的库生态而言,还是有一…

C# WinForm 托盘程序

添加控件 将NotifyIcon和一个ContextMenuStrip控件。拖到主窗体中本文来自博客园,作者:VipSoft 转载请注明原文链接:https://www.cnblogs.com/vipsoft/p/18665897

中考英语优秀范文-热点话题-传统文化-002 Spreading Traditional Chinese Culture 传播中国传统文化

1 写作要求 近日,在公共场所,人们身着汉服拍照,演奏古筝、二胡等传统乐器;校园里,学生吟诵古典诗词,写毛笔字……处处彰显着中国传统文化的魅力。你校英文报正在组织题为Spreading Traditional Chinese Culture 的征文活动,请你选择下表中的一种传统文化的形式,写一篇短…

Rider 报错 Error MSB4216 : 无法运行“GenerateResource”任务

Rider 打开设计器界面报错: rider Error MSB4216 : 无法运行“GenerateResource”任务,..... 打开设置,搜索 ms build另选一个版本试下发现可以了。