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

功能:

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

js库:

html2Canvas

坑:

1.导出的图片模糊

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

解决方案:

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

  • html2Canvas 要设置分辨率

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

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

相关推荐
LuckyDog阿祥8 小时前
卸载Microsoft Edge:EdgeRemover完整操作指南
前端·edge
zhangxingchao8 小时前
AI应用开发九:从 Hermes Agent 学长期记忆
前端·人工智能·后端
xiaofeichaichai8 小时前
Vite原理与Webpack对比
前端·webpack·node.js
_杨瀚博8 小时前
小程序拍证件并局部裁剪
前端
William_Xu10 小时前
React 新旧生命周期对比
前端
PBitW10 小时前
为什么vite中TS报错,可以继续运行?Webpack不行?💡
前端·typescript
GISer_Jing10 小时前
一套H5跑通三端:App+小程序内嵌H5跨端适配全栈解决方案
前端·前端框架·ai编程
码云之上11 小时前
项目团队从 5 人扩到 15 人,我写了个 CLI 让 IDE 共享 AI 规则
前端·人工智能·后端
飞天狗11 小时前
LCP / INP / CLS 三个维度的实战调优:把 Web Vitals 从不及格拉到优秀的完整路径
前端·性能优化