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

功能:

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

js库:

html2Canvas

坑:

1.导出的图片模糊

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

解决方案:

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

  • html2Canvas 要设置分辨率

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

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

相关推荐
霍理迪14 分钟前
Vue的响应式和生命周期
前端·javascript·vue.js
李剑一18 分钟前
别再瞎写了!Cesium 模型 360° 环绕,4 套源码全公开,项目直接用
前端
小码哥_常36 分钟前
Android消息机制:Handler、Looper和Message的深度剖析
前端
小码哥_常38 分钟前
安卓开发新姿势:文件Picker全攻略,无痛适配不再难
前端
happymaker06261 小时前
web前端学习日记——DAY04
前端·学习
发现一只大呆瓜1 小时前
React-路由监听 / 跳转 / 守卫全攻略(附实战代码)
前端·react.js·面试
swipe2 小时前
为什么 RAG 一定离不开向量检索:从文档向量化到语义搜索的工程实现
前端·llm·agent
OpenTiny社区2 小时前
AI-Extension:让 AI 真的「看得到、动得了」你的浏览器
前端·ai编程·mcp
IT_陈寒2 小时前
Redis缓存击穿:3个鲜为人知的防御策略,90%开发者都忽略了!
前端·人工智能·后端
农夫山泉不太甜3 小时前
Tauri v2 实战代码示例
前端