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

功能:

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

js库:

html2Canvas

坑:

1.导出的图片模糊

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

解决方案:

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

  • html2Canvas 要设置分辨率

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

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

相关推荐
changuncle5 分钟前
Angular初学者入门第三课——工厂函数(精品)
前端·javascript·angular.js
ScottePerk23 分钟前
前端安全之XSS和CSRF
前端·安全·xss
PineappleCoder24 分钟前
Canvas 复杂交互步骤:从事件监听 to 重新绘制全流程
前端
s3xysteak33 分钟前
我要成为vue高手01:上下文
前端·javascript·vue.js
复苏季风35 分钟前
前端居中布局:从 "卡壳" 到 "精通" 的全方位指南
前端·css
qb37 分钟前
vue3.5.18源码:computed 在发布订阅者模式中的双重角色
前端·vue.js·架构
专注VB编程开发20年40 分钟前
c# .net支持 NativeAOT 或 Trimming 的库是什么原理
前端·javascript·c#·.net
挽淚41 分钟前
前端HTTP请求:Fetch api和Axios
前端
乘风丿1 小时前
🚀 从零构建 AI 代码审查机器人:让 GitLab 自动审查代码质量
前端
骑自行车的码农1 小时前
React 上下文游标栈 contextStackCursor valueStack fiberStack
前端·react.js