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

功能:

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

js库:

html2Canvas

坑:

1.导出的图片模糊

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

解决方案:

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

  • html2Canvas 要设置分辨率

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

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

相关推荐
ResponseState20014 小时前
安卓原生写uniapp插件手把手教学调试、打包、发布。
前端·uni-app
颜酱14 小时前
SourceMap 深度解析:从映射原理到线上监控落地
前端·javascript
LYOBOYI12314 小时前
qt的事件传播机制
java·前端·qt
IT_陈寒14 小时前
Python 3.12 性能优化:5 个鲜为人知但提升显著的技巧让你的代码快如闪电
前端·人工智能·后端
军军君0114 小时前
Three.js基础功能学习二:场景图与材质
前端·javascript·学习·3d·材质·three·三维
Komorebi゛14 小时前
【Vue3 + Element Plus】Form表单按下Enter键导致页面刷新问题
前端·javascript·vue.js
踢球的打工仔14 小时前
typescript-基本类型
前端·javascript·typescript
dly_blog14 小时前
Vue 组件通信方式大全(第7节)
前端·javascript·vue.js
枫叶丹415 小时前
ModelEngine应用编排创新实践:通过可视化编排构建大模型应用工作流
开发语言·前端·人工智能·modelengine
郭小铭15 小时前
将 Markdown 文件导入为 React 组件 - 写作文档,即时获取交互式演示
前端·react.js·markdown