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

功能:

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

js库:

html2Canvas

坑:

1.导出的图片模糊

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

解决方案:

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

  • html2Canvas 要设置分辨率

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

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

相关推荐
simon_luv_pho2 分钟前
一行代码把网页变成 AI Agent?
前端
兆子龙9 分钟前
模块联邦(Module Federation)详解:从概念到手把手 Demo
前端·架构
ZFSS12 分钟前
Kimi Chat Completion API 申请及使用
前端·人工智能
没想好d13 分钟前
通用管理后台组件库-8-表格组件
前端
前端Hardy18 分钟前
HTML&CSS&JS:打造丝滑的3D彩纸飘落特效
前端·javascript·css
布列瑟农的星空1 小时前
rsbuild mock 插件开发指南
前端
用泥种荷花1 小时前
【LangChain.js学习】 文档加载(Loader)与文本分割全解析
前端
cxxcode2 小时前
Vite 热更新(HMR)原理详解
前端
HelloReader2 小时前
Tauri 架构从“WebView + Rust”到完整工具链与生态
前端
Bigger2 小时前
告别版本焦虑:如何为 Hugo 项目定制专属构建环境
前端·架构·go