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

功能:

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

js库:

html2Canvas

坑:

1.导出的图片模糊

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

解决方案:

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

  • html2Canvas 要设置分辨率

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

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

相关推荐
૮・ﻌ・1 分钟前
Nodejs - 02:模块化、npm、yarn、cnpm
前端·npm·node.js·express·yarn·cnpm·包管理工具
大雷神1 分钟前
HarmonyOS APP<玩转React>开源教程十:组件化开发概述
前端·react.js·开源·harmonyos
小小小小宇6 分钟前
React useMemo 深度源码解析
前端
tiany5248 分钟前
养虾记录-如何配置多agent和多个飞书机器人独立对话
java·前端·飞书
踩着两条虫12 分钟前
AI 驱动的 Vue3 应用开发平台 深入探究(十四):扩展与定制之插件系统开发指南
前端·vue.js·ai编程
我命由我1234513 分钟前
Element Plus - 在 el-select 的每个选项右侧添加按钮
前端·javascript·vue.js·前端框架·ecmascript·html5·js
别看我只是一直狼17 分钟前
🚀 程序员高效 Prompt 实战速查手册
前端·后端
前端付豪17 分钟前
AI Math Tutor v3:题目知识点自动分类
前端·python·llm
weixin1997010801618 分钟前
衣联网商品详情页前端性能优化实战
前端·性能优化
技术钻石流21 分钟前
面向“传统程序员”的端到端 10x Vibe Coding 指南(大型需求) - 从面向业务开发转向面向“Agent 员工”开发
前端·后端·ai编程