html2canvas与window.devicePixelRatio

官方文档

html2canvas(document.querySelector('.content')).then(canvas => {
   
    console.log(canvas);
    // document.body.append(canvas)
    const img = document.querySelector('.img');
    img.src = canvas.toDataURL();
})
1
2
3
4
5
6
7

实现截图过程：

1. 通过

关于window.devicePixelRatio

• 设备像素/物理像素
  设备像素也被称为物理像素，它是显示设备中最小的物理部件。在同一设备中，物理像素的总数是固定的。

• 独立像素/CSS像素
  CSS像素是一个抽象的单位，主要使用在浏览器上，用来精确的度量(确定)web页面上的内容。CSS像素被称为与设备无关的像素(device-independent像素)，简称DIPs

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

window.devicePixelRatio

https://developer.mozilla.org/zh-CN/docs/Web/API/Window/devicePixelRatio
返回当前显示设备的物理像素分辨率与CSS像素分辨率之比。简单来说，它告诉浏览器应使用多少屏幕实际像素来绘制单个CSS像素。

所以在标准屏幕下，devicePixelRatio应该为1。

特例

视网膜（Retina）显示屏，它会使用更多的屏幕像素绘制相同的对象，从而获得更清晰的图形。devicePixelRatio为2.

所以虽然一个DOM元素的CSS尺寸是375px，但是因为Apple是视网膜屏幕，所以使用了