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

功能:

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

js库:

html2Canvas

坑:

1.导出的图片模糊

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

解决方案:

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

  • html2Canvas 要设置分辨率

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

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

相关推荐
WYiQIU20 小时前
宇树科技Web前端岗(AI方向),这不算泄题吧......
前端·vue.js·人工智能·笔记·科技·面试·职场和发展
Januea20 小时前
Chrome的Fetch/XHR是什么?
前端·chrome
betazhou20 小时前
TDSQL-PG创建测试表并定时插入数据模拟生产
前端·javascript·数据库·tdsql·tdsql-pg
W.A委员会20 小时前
地址栏输入url到显示画面
前端·网络
xuankuxiaoyao20 小时前
Vue.js实践-组件基础上
前端·javascript·vue.js
甄心爱学习20 小时前
【项目实训】法律文书智能摘要系统3
前端·人工智能
冲浪中台20 小时前
从追逐技术到回归业务本质,吃互联网红利罢了
服务器·前端·人工智能·低代码
小马_xiaoen20 小时前
前端虚拟列表(Virtual List)从原理到实战:海量数据渲染终极方案
前端·数据结构·list
M ? A20 小时前
你的 Vue 3 响应式状态,VuReact 如何生成 React Hooks 依赖数组?
前端·javascript·vue.js·经验分享·react.js·面试·vureact
FlyWIHTSKY20 小时前
HTML 中 `<span>` 和 `<div>` 详细对比
前端·html