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

功能:

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

js库:

html2Canvas

坑:

1.导出的图片模糊

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

解决方案:

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

  • html2Canvas 要设置分辨率

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

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

相关推荐
小奶包他干奶奶几秒前
Webpack学习——如何自定义钩子
前端·学习·webpack
AI3D_WebEngineer3 分钟前
企业级业务平台项目设计、架构、业务全解之平台篇
前端·javascript·vue
该用户已不存在6 分钟前
免费 SSL 证书缩短至 90 天,你的运维成本还能hold住吗
前端·后端·https
七月十二21 分钟前
【Vite】离线打包@iconify/vue的图标
前端·vue.js
米花丶23 分钟前
解决前端监控上报 Script Error实践
前端·javascript
JarvanMo25 分钟前
如何在 Flutter 应用中大规模实现多语言翻译并妥善处理 RTL(从右到左)布局?
前端
Haha_bj25 分钟前
iOS深入理解事件传递及响应
前端·ios·app
1024小神26 分钟前
用html和css实现放苹果的liquidGlass效果
前端
拜晨26 分钟前
CG-01: 深入理解 2D 变换的数学原理
前端
im_AMBER28 分钟前
Canvas架构手记 07 状态管理 | 组件通信 | 控制反转
前端·笔记·学习·架构·前端框架·react