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

功能:

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

js库:

html2Canvas

坑:

1.导出的图片模糊

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

解决方案:

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

  • html2Canvas 要设置分辨率

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

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

相关推荐
ZzT14 小时前
深扒 Claude Code Buddy 模式:一只仙人掌背后的确定性随机算法
前端
cch891814 小时前
PHP vs Go:Web开发选谁更胜一筹?
前端·golang·php
sg_knight14 小时前
MinIO自带的Web Console管理后台怎么用?日常管理操作全解
前端·文件管理·minio·ftp·cos·oss
Goodwin14 小时前
TypeScript 成 AI 应用层标配?GitHub Trending 告诉你2026前端往哪走
前端·人工智能·github
风筝与风待过的地方14 小时前
Vue2 到 Vue3:性能飞跃与 Diff 算法革命
前端
爱上妖精的尾巴14 小时前
WPS JS宏编程教程学习笔记目录
前端
前端小咸鱼一条15 小时前
15.Symbol类型
前端·javascript·vue.js
二十一_15 小时前
炸了!Claude Code 51万行源码全部泄露,我已经拿到了完整代码
前端·langchain·claude
RePeaT15 小时前
npm 依赖版本号中 `^` 和 `~` 到底有什么区别?
前端·javascript·npm
DanCheOo15 小时前
多模型适配:一套代码接 6 家 AI 厂商
前端·ai编程