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

功能:

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

js库:

html2Canvas

坑:

1.导出的图片模糊

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

解决方案:

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

  • html2Canvas 要设置分辨率

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

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

相关推荐
喵个咪几秒前
统一范式:中后台Admin项目标准化API分层开发方案(Vue/React通用)
前端·vue.js·react.js
Shirley~~5 分钟前
figma Mcp
前端·ai编程
Bacon7 分钟前
Gstack + Superpowers:当 AI 编程的"脑子"和"手脚"终于在一起了
前端·人工智能
喵个咪12 分钟前
拒绝过度封装!GoWind Admin:基于Element Plus重塑中后台CRUD开发范式
前端·vue.js·typescript
Komorebi_999936 分钟前
LangChain Day5 课程:Agent 智能代理
前端·langchain·大模型
七牛云行业应用1 小时前
别等了!xAI 的终端编码 Agent 来了——Grok Build 0.1 安装到并行 Agent全流程
前端
Asmewill1 小时前
LangGraph学习笔记三(State)
前端
史前码农JH1 小时前
nodejs项目Monorepo模式的基础操作
前端
RD_daoyi1 小时前
Google 网站收录全流程解析:抓取、索引与排名机制详解
前端·javascript·人工智能·学习·搜索引擎·html
@大迁世界1 小时前
AI还替不了的JS能力
开发语言·前端·javascript·人工智能·ecmascript