html2Canvas截图中特殊字体出不来原因

于 2023-10-07 15:05:25 发布
阅读量595 收藏
点赞数
文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ju__ju/article/details/133639997
版权

项目中有正常字体和特殊字体,但是导出成图片时特殊字体无法正常显示

下图为导出的截图:

原因: 特殊字体的名称定义

因为之前特殊字体的font-family,是以数字开头,放在html中被转义了,所以一直出不来,前面改成英文后可以正常显示

橘哥哥
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
html2canvas文字消失,html2canvas截图丢失部分元素
weixin_28771421的博客
06-03 2850
let targetDom = $('#outerLayoutPC');let copyDom = targetDom.clone();copyDom.width(targetDom.width() + 'px');copyDom.height(targetDom.height() + 'px');$('body').append(copyDom);html2canvas(targetDom, {...
html2canvas页面截图图片不显示
weixin_30384031的博客
08-15 2560
前两天在一个群里，有人问使用html2canvas屏幕截图的时候为什么页面的图片不显示只显示了文字，我没有做过屏幕截图的需求，所以不是很清楚，今天稍稍测试了一下。 在github上将html2canvas源码下载到本地，examples文件夹里有三个示例demo，这三个demo都是纯文字不包含图片的，前两个demo是打开之后直接就生成图片展示出来了，第三个是一个按钮触发生成，这里使用第三个dem...
处理 canvas使用外部字体，外部字体加载不及时
01-17 1046
处理 canvas使用外部字体，外部字体加载不及时
html2canvas截图后引入的字体样式丢失
记录、分享、合作、共赢
10-26 2178
以Chrome为例
2021-10-19
musyou的博客
10-19 631
html2canvas在ios15中出错的问题 设置html2canvas的字体样式可能会解决问题。 解决方案：font-family: “\9ED1\4F53”; （将字体转成unicode码显示） 我遇到的问题是使用html2canvas签名上传到阿里云，但是在上传时会直接卡死页面并强制刷新， 然后在网上找到答案，估计是html2canvas的字体ios15不支持，改变设置了html2canvas的div字体样式有可能会解决问题，我是解决了。 ...
html自定义字体无效,canvas自定义字体失效
weixin_42129970的博客
06-17 1707
失效原因一：fillText绘制文本时，字体文件尚未加载完成字体文件4.2M，加载时长23ms解决方案1、压缩字体2、.ttf转成.woff2，可搜索在线ttf转woff2网站转换 https://www.fontke.com/tool/convfont/3、window.onload示例代码canvasbody {margin: 0;}@font-face {font-family: yanzh...
急急急！iphone6p-8p 关于html2canvas文字不显示问题
qq_38818574的博客
02-20 343
有关html2canvas问题。
vue 制作带二维码的海报并下载 。 (html2canvas转为图片不显示文字的方法)
湾流~ 的博客
04-07 1911
效果图如上 **1.安装依赖 npm install** qrcode (生成二维码) html2canvas (截取html元素生成图片) **2.结构** ```typescript //海报结构 //posterHtmlBg 海报背景图路径 v-show="false" 元素不需要显示在页面上...
html2canvas字体重叠,简单记录 html2canvas网页中的图片无法显示的问题
weixin_33664191的博客
05-31 1316
html2canvas绘制图片，如果页面中存在img，出现绘制的结果无图片时，原因如下：(建议逐步查找)1.绘制时间过早，图片尚未加载解决方式：通过setTimeout延迟绘制或者通过img.onload监听图片是否绘制完成2.绘制的图片跨域问题解决方式：图片生成前，添加 image.crossOrigin = "*";切记：要在图片赋值之前添加3.如果出现安卓或者pc端正常显示，ios端无法显示...
html网页（有图片切换、特殊字体）
03-08
用简单的table做的网页，包括了javaScript脚本，css文本样式的应用 适合初学网页制作
从入门到精通HTML5——PDF——网盘链接
02-27
　3.2.1 设置文字字体——face 44 　3.2.2 设置字号——size 45 　3.2.3 设置文字颜色——color 46 　3.2.4 粗体、斜体、下划线——strong、em、u 46 　3.2.5 上标与下标——sup、sub 47 　3.2.6 设置删除线——...
html设置了字体为什么没效果,为什么设置字体没效果，楷书不行么
weixin_28999945的博客
06-03 970
html>Documentcanvas{background-color:#000;opacity:0.7}您的浏览器不支持canvasvarcanvas=document.getElementById("canvas");varcontext=canvas.getContext("2d");//在此处补充代码//通用阴影的统一设置context.shadowOffsetX=5;c...
html2canvas在ios截图文字错乱
weixin_45776910的博客
12-20 414
记一次html2canvas使用 截图 给文字每个都加span标签 参考文章：https://lrdcq.com/me/read.php/139.htm
html2canvas截图字体重叠,【你并不总是需要html2canvas】一，截图适配
weixin_39611208的博客
06-01 904
1 序章《你并不总是需要html2canvas》将会是系列文章，逐步讲解如何使用canvas原生api来实现我们的截图需求，文章将围绕不使用html2canvas需要解决的一系列问题来展开，期望能给大家带来如下收获:熟悉canvas原生api(但不像接口文档)；了解到html2canvas解决了哪些问题，而我们自己可以怎么解决；分析需求，按需使用或制造“轮子”的能力；2 背景相信H5截图分享的功能...
如何在html中加入字体库,网页中添加特殊字体解决方案
weixin_32597695的博客
05-31 2169
前言今天总结一下网页中添加特殊字体的解决方案。一个字体一般情况下很大，少则1-2M，一般是4-6M，大的字体十几兆的都有。加载在网页中会导致速度变得很慢，因此，你在网页中很少看到有用特殊字体的原因。今天主要总结一下网页中运用特殊字体的一些解决方案。方案一：(针对有针对性的展示，死的文字)目前市面上有很多字体压缩的方案，但是都是提供了具体的字体库，也就是你网页中用的文字，都在字体库里面，不在里面则网...
html2Canvas（踩坑）
qq_36472571的博客
06-06 976
html2Canvas 就是不支持多行超出显示省略号，这里有两个方案 1）超出高度之后，直接overflow:hidden 2) js控制字数，截取
html2canvas截图不清晰
最新发布
10-12
HTML2Canvas是一个JavaScript库，用于将HTML元素转换为Canvas对象，并进行截图操作。然而，在某些情况下，由于各种因素的影响，截图可能会变得不清晰。以下是一些可能导致截图不清晰的原因： 1. 分辨率问题：HTML2Canvas是根据用户设备的分辨率来渲染图片的。如果设备的分辨率较低，生成的截图可能会显示模糊或像素化。 2. 图片尺寸过大：如果要截图的元素非常大，超出了Canvas的最大尺寸限制，HTML2Canvas可能会对截图进行缩放。这可能会导致截图失去清晰度。 3. CSS样式问题：某些CSS样式属性可能会导致截图不清晰。例如，使用transform属性进行缩放、旋转或倾斜的元素，可能在截图中显示出锯齿或模糊效果。 4. 图片加载问题：如果要截图的元素包含了远程的图片或者CSS背景图片，并且这些资源加载速度较慢或者未加载完成，可能会导致截图中出现空白或残缺的部分。 为了解决这些问题，我们可以尝试以下方法： 1. 调整分辨率：如果可能的话，尝试增加设备的分辨率，可以提高截图的清晰度。 2. 缩小截图范围：如果要截图的元素太大，可以尝试缩小截图的范围，以避免超出Canvas的最大尺寸。 3. 检查CSS样式：检查要截图的元素的CSS样式，避免使用会导致模糊效果的属性。 4. 确认资源加载完整：确保要截图的元素包含的图片或者背景图片已经加载完成，可以通过监听图片的加载事件来确认。 总之，HTML2Canvas截图不清晰可能是由于多种因素造成的，我们可以通过调整分辨率、缩小截图范围、检查CSS样式和确认资源加载完整来提高截图的清晰度。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值