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

功能:

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

js库:

html2Canvas

坑:

1.导出的图片模糊

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

解决方案:

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

  • html2Canvas 要设置分辨率

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

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

相关推荐
林太白18 分钟前
js-var和let以及const区别
前端·面试
看谷秀30 分钟前
arkts-10 实战
前端·arkts
范小兵31 分钟前
# DevEco CLI实战:鸿蒙App「至客」从0开发到正式上架
前端·harmonyos
半生过往1 小时前
前端工程师学习智能体开发(一)
前端·学习·状态模式
白雾茫茫丶1 小时前
Vibecoding 一个主题切换动画库:13 种揭幕方式
前端·vue.js·react.js
计算机魔术师1 小时前
谷歌宣布 TPU 互联架构支持 100 万芯片规模,电力供应成 AI 基建核心瓶颈
前端
雪芽蓝域zzs1 小时前
第四十九节:TagsView 右键菜单(带三角箭头)给每个 tag 增加**鼠标右键菜单**(右键标签弹出:关闭、关闭其他、关闭全部)
前端·javascript·vue.js
এ慕ོ冬℘゜1 小时前
从零开发移动端医院挂号页面:适配、交互与前端实现详解
前端·javascript
掘金挖土2 小时前
前端手摸手跑路之 AI 应用开发(六)
前端·后端
liuyt20222 小时前
【javaweb】day4
前端