CSS以实际像素设置元素大小，而不是设备像素

Question

window.setTimeout(function() {
  html2canvas(document.querySelector("#a")).then(function(canvas) {
    canvas.toBlob(function(aBlob) {
      var a = document.createElement('a'),
        b = URL.createObjectURL(aBlob);
      a.setAttribute('download', 'captured_image.png');
      a.setAttribute('href', b);
      a.click();
    });
  });
}, 1000);

<div id="a" style="width: 100px; height: 100px; background-color: yellow; box-sizing: border-box; border: 1px solid red;">
  This is 100px div
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.0/html2canvas.min.js"></script>

(Because of cross origin it will not work on stackoverflow but in localhost it works but if you use hi-res display downloaded image will be 200px not 100px)

我正在生成 iframe 中显示的页面的“屏幕截图”，我总是希望它的大小固定为 100x100 像素。它可以在我的 PC 上运行，但是当我在高分辨率计算机上运行代码时，下载的图像大于 100x100（例如 200x200）。我认为这是因为设备像素更大，但是如何将其设置为像素？我当前的代码是：

iframe {
  width: 100px;
  height: 100px;
}

是否可以忽略设备像素而强制使用普通像素？

编辑：JHeth 的工作解决方案评论如下：html2canvas(element, {scale:1}).then(...)

Answer 1

html2canvas(element, {scale:1}).then(...)