html2canvas与window.devicePixelRatio

. . . . .

已于 2022-11-26 21:42:43 修改

阅读量996

点赞数

CC 4.0 BY-SA版权

分类专栏：大前端技术文章标签： css html css3

于 2022-11-26 12:16:35 首次发布

本文链接：https://blog.youkuaiyun.com/yexudengzhidao/article/details/128049275

本文探讨了window.devicePixelRatio的概念及其在不同设备上的应用，特别是在视网膜屏幕上。接着，文章深入讨论了html2canvas截图时遇到的问题，如box-shadow的渲染问题和max-height造成的滚动问题，并提供了相应的解决策略。最后，介绍了如何将canvas转换成Blob并上传到OSS，以及html2canvas截图的原理，涉及foreignObject元素在SVG中的作用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

官方文档

html2canvas(document.querySelector('.content')).then(canvas => {
   
   
    console.log(canvas);
    // document.body.append(canvas)
    const img = document.querySelector('.img');
    img.src = canvas.toDataURL();
})

实现截图过程：

通过

关于window.devicePixelRatio

设备像素/物理像素
设备像素也被称为物理像素，它是显示设备中最小的物理部件。在同一设备中，物理像素的总数是固定的。
独立像素/CSS像素
CSS像素是一个抽象的单位，主要使用在浏览器上，用来精确的度量(确定)web页面上的内容。CSS像素被称为与设备无关的像素(device-independent像素)，简称DIPs

在一个标准的显示密度下，一个CSS像素对应着一个设备像素。