【实践方案】html2Canvas 生成图片如何更清晰

功能:

背景图上加上一些自定义 div 信息,并且打包生成图片下载

js库:

html2Canvas

坑:

1.导出的图片模糊

2.不同设备 清晰度不一致(比如说 windows 比 mac 模糊)

解决方案:

  • 背景图不要使用 div,要使用 img

  • html2Canvas 要设置分辨率

javascript 复制代码
html2canvas(dom,
    {  
        scale: 4, //按比例增加分辨率 (2=双倍).  
        dpi: window.devicePixelRatio * 4, //设备像素比
    }
)

注意:以上数字越大,导出的图片体积也就越大,也更清晰

相关推荐
大飞哥~BigFei5 分钟前
新版chrome浏览器安全限制及解决办法
java·前端·chrome·安全·跨域
hepingfly7 分钟前
SEO 如何寻找关键词?
前端
IT_陈寒9 分钟前
SpringBoot 3.2实战:5个性能优化技巧让你的应用提速50%
前端·人工智能·后端
扶苏100216 分钟前
前端js高频面试点汇总
开发语言·前端·javascript
firstacui17 分钟前
Keepalived 双主热备和三主热备
前端·chrome
小二·35 分钟前
Python Web 开发进阶实战:微前端架构初探 —— 基于 Webpack Module Federation 的 Vue 微应用体系
前端·python·架构
阿呆59140 分钟前
html前端开发注释的写法
前端·html
pusheng202542 分钟前
守护能源与数据的安全防线:从UL 2075标准解析储能及数据中心氢探技术的演进
前端·安全
.又是新的一天.1 小时前
【前端Web开发HTML5+CSS3+移动web视频教程】02 html - 列表、表格、表单
前端·html·html5
程序员鱼皮1 小时前
你的 IP 归属地,是咋被挖出来的?
前端·后端·计算机·程序员·互联网·编程经验