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

功能:

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

js库:

html2Canvas

坑:

1.导出的图片模糊

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

解决方案:

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

  • html2Canvas 要设置分辨率

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

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

相关推荐
光影少年5 分钟前
前端如何虚拟列表优化?
前端·react native·react.js
Moment6 分钟前
一杯茶时间带你基于 Yjs 和 reactflow 构建协同流程图编辑器 😍😍😍
前端·后端·面试
invicinble24 分钟前
对于前端数据的生命周期的认识
前端
PieroPc27 分钟前
用FastAPI 后端 和 HTML/CSS/JavaScript 前端写一个博客系统 例
前端·html·fastapi
hunter145034 分钟前
2026.1.4 html简单制作
java·前端·笔记·html
鹏程十八少34 分钟前
Android 深入剖析Android内存泄漏:ViewPager2与Fragment的生命周期陷阱
android·前端·app
李少兄35 分钟前
深入理解 CSS opacity 属性
前端·css
幺零九零零36 分钟前
前端测试·1
前端
1024小神38 分钟前
uniapp项目中使用vue3和小程序组件父子通信
前端·小程序·uni-app
Knight_AL40 分钟前
Vue + Spring Boot 项目添加 /wvp 前缀的完整链路解析(从浏览器到静态资源)
前端·vue.js·spring boot