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

功能:

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

js库:

html2Canvas

坑:

1.导出的图片模糊

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

解决方案:

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

  • html2Canvas 要设置分辨率

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

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

相关推荐
毕设十刻23 分钟前
基于Vue的考勤管理系统8n7j8(程序 + 源码 + 数据库 + 调试部署 + 开发环境配置),配套论文文档字数达万字以上,文末可获取,系统界面展示置于文末
前端·数据库·vue.js
coding随想30 分钟前
掌控选区的终极武器:getSelection API的深度解析与实战应用
java·前端·javascript
嵌入式小能手40 分钟前
飞凌嵌入式ElfBoard-文件I/O的深入学习之存储映射I/O
java·前端·学习
沐风。561 小时前
Object方法
开发语言·前端·javascript
程序猿小蒜1 小时前
基于springboot的医院资源管理系统开发与设计
java·前端·spring boot·后端·spring
仙人掌一号2 小时前
梳理SPA项目Router原理和运行机制 [共2500字-阅读时长10min]
前端·javascript·react.js
粥里有勺糖2 小时前
视野修炼-技术周刊第128期 | Bun 被收购
前端·javascript·github
用户12039112947262 小时前
彻底搞定大模型流式输出:从二进制碎块到“嘚嘚嘚”打字机效果,让底层逻辑飞起来
前端·javascript·面试
CPU NULL2 小时前
Vue 3 前端调试与开发指南
前端·javascript·vue.js
幼儿园技术家3 小时前
多方案统一认证体系对比
前端