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

功能:

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

js库:

html2Canvas

坑:

1.导出的图片模糊

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

解决方案:

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

  • html2Canvas 要设置分辨率

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

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

相关推荐
狗凯之家源码网11 分钟前
电商代付系统从零搭建与实战指南
前端·后端·开源
小雨下雨的雨15 分钟前
通过鸿蒙PC Electron框架技术完成-井字棋游戏 - 实现详解
前端·javascript·游戏·华为·electron·鸿蒙
meilindehuzi_a16 分钟前
掌握 ES6 核心语法与大模型(NLP)项目工程化搭建指南
前端·自然语言处理·es6
IT_陈寒24 分钟前
Vue组件通信这个坑我跳了两次才知道怎么爬出来
前端·人工智能·后端
smallswan30 分钟前
第十四 算数运算
linux·服务器·前端
AI_零食31 分钟前
甄嬛人物日志-朗读升级 - 鸿蒙PC Electron框架完整技术实现指南
前端·学习·华为·electron·鸿蒙·鸿蒙系统
HackTwoHub31 分钟前
WEB扫描器Invicti-Professional-V26.50.0(自动化爬虫扫描)更新
前端·人工智能·chrome·爬虫·web安全·网络安全·自动化
copyer_xyf32 分钟前
Python 文件基本操作
前端·后端·python
x***r15143 分钟前
linux安装 redis-5.0.5.tar.gz 详细步骤(源码编译、配置、启动)
前端
程序员小羊!1 小时前
01HTML预备知识
前端·html