从桌面到移动的画布图像不同大小（以像素为单位）

Posted 2023-03-28

【中文标题】从桌面到移动的画布图像不同大小（以像素为单位）

【英文标题】：Canvas image different size in pixels from desktop to mobile

【发布时间】：2019-07-16 10:12:54

【问题描述】：

嘿，所以我创建了这个站点：http://dst.dstealth.com，以帮助使用 html2canvas 从 HTML div 元素自动生成 png 图像。我的 html2canvas 初始化为静态宽度 n 高度。

现在，当我在 chrome 等桌面浏览器上使用该网站时，它会生成并保存 876 x 434 像素大小的图像，这是我想要的输出。

但是，当我在我的 android chrome 浏览器上执行完全相同的操作时，它会生成超过 2000 x 2000 像素的图像。

我认为设置视口元数据会有所帮助，但这反而使我的桌面浏览器开始以稍大的分辨率保存图像，所以我现在在我的代码中对此进行了注释。

谁能帮助我了解这里发生了什么以及如何确保生成的图像始终为 876 x 434？

【问题讨论】：

根据 html2canvas 文档，您需要将 scale 属性设置为 1，这样它就不会使用 devicePixelRatio：html2canvas.hertzen.com/configuration

所以我在我的 html2canvas 调用中添加了缩放选项，它似乎没有改变任何东西...html2canvas(box, width: WD, height: HT, scale: 1).then(function(canvas) 另外请注意，我很好奇我的设备的 devicePixelRatio 是什么所以我添加了一个字段在我的 html 中显示设备像素比，在我的桌面上，该值在我的浏览器上显示为 1，但在我的手机上它根本不返回值......这正常吗？ ://

原来只是我手机上的一个缓存问题，一旦缓存被清除就可以了！请张贴作为答案，以便我可以提名为正确答案。

【参考方案1】：

根据 html2canvas 文档，您需要将 scale 属性设置为 1，这样它就不会使用 devicePixelRatio：html2canvas.hertzen.com/configuration