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

功能:

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

js库:

html2Canvas

坑:

1.导出的图片模糊

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

解决方案:

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

  • html2Canvas 要设置分辨率

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

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

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