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

功能:

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

js库:

html2Canvas

坑:

1.导出的图片模糊

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

解决方案:

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

  • html2Canvas 要设置分辨率

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

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

相关推荐
Apifox.4 小时前
Apifox 近期更新|AI Agent Debugger、A2A Debugger、Postman API 导入、Ask AI 侧边栏对话
前端·人工智能·后端·测试工具·测试用例·postman
invicinble4 小时前
前端框架使用vue-cli (第五层:构建打包层--babel.config.js介绍)
前端·vue.js·前端框架
张元清4 小时前
React 浏览器标签页 UX:用标题、Favicon 和通知把用户拉回来
前端·javascript·面试
前端老石人4 小时前
与 CSS 的一次美丽邂逅
前端·css
lovemiss4 小时前
拒绝手动艾特!我用 50 行 JS 实现 npm publish 后钉钉全自动“战报”推送
前端
asuishi4 小时前
Unix Domain Socket 使用指南
前端
跑跑快跑4 小时前
PNPM线上部署打包失败
前端
李剑一4 小时前
一行代码复刻微信红包打开效果,近乎100%还原 | 附源码
前端
invicinble4 小时前
前端框架使用vue-cli( 第三层:插件配置层)
前端·vue.js·前端框架
Mr数据杨4 小时前
【Codex】用APP绑定教程模块规范移动端接入指引
java·前端·javascript·django·codex·项目开发