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

功能:

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

js库:

html2Canvas

坑:

1.导出的图片模糊

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

解决方案:

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

  • html2Canvas 要设置分辨率

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

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

相关推荐
哆啦A梦158839 分钟前
Vue3魔法手册 作者 张天禹 012_路由_(一)
前端·typescript·vue3
RaidenLiu1 小时前
别再手写 MethodChannel 了:Flutter Pigeon 工程级实践与架构设计
前端·flutter·前端框架
~央千澈~2 小时前
抖音弹幕游戏开发之第17集:添加日志系统·优雅草云桧·卓伊凡
linux·服务器·前端
JamesYoung79712 小时前
第一部分 — 基础知识 项目框架与文件布局
前端·chrome
孟健2 小时前
程序员就业率暴跌27.5%:我离开大厂5个月后,看懂了这件事
前端
卸任2 小时前
Electron判断是内置摄像头还是接摄像头
前端·react.js·electron
NEXT063 小时前
普通函数与箭头函数的区别
前端·javascript·面试
全马必破三3 小时前
Webpack知识点汇总
前端·webpack·node.js
NEXT063 小时前
CommonJS 与 ES Modules的区别
前端·面试·node.js
猪头男3 小时前
【从零开始学习Vue|第八篇】深入组件——组件事件
前端