javascript - FabricJS HiDPI 获取图像数据

Question

我仍在收集理解 HTML5 中的 Web 2 打印编辑器所需的内容。我正在使用 FabricJS 和许多其他第 3 方工具来实现它。

我最新的障碍是我的三星 Chromebook Pro，它有一个 HiDPI/视网膜显示屏。 window.devicePixelRatio 不同，我正在尝试弄清楚如何使用 FabricJS 处理这种更高的 DPI。我按照其他人所说的成功了，但它似乎不起作用或对我没有帮助。再加上我的 Canvas 变得非常大，物体不再是可移动的。

我还在使用另一个第 3 方库，PetitoJPEG ，我用它来编码来自 FabricJS Canvas 的原始像素数据。由于我的其他笔记本电脑的 devicePixelRatio 不同，运行编码器会导致 Canvas 右侧的红点不显示在校样图像上。

我想知道如何在 HiDPI 显示器上对整个 Canvas 进行编码。

由于所有第 3 方 Assets ，我愿意提供直接链接而不是 JSFiddle:http://xbit.x10host.com/editor2.php

我想我明白人们所说的缩放方法是成功的，但我想知道它是否因为我在 Canvas 容器上的 CSS 转换而无法正常工作。我尝试通过控制台调整缩放比例和 Canvas 宽度/高度以及 CSS 宽度/高度，但无济于事。

如有任何帮助，我们将不胜感激。我将在下面粘贴每个人都说有效的代码段。

注意:我的 Samsung Chromebook Pro 记录了 26562 字节的写入，我的 Lenovo x230 Windows 笔记本电脑记录了 27586 字节。

if( window.devicePixelRatio !== 1 ){

  var c = canvas.getElement(); // canvas = fabric.Canvas
  var w = c.width, h = c.height;

// Scale the canvas up by two for retina
// just like for an image
  c.setAttribute('width', w*window.devicePixelRatio);
  c.setAttribute('height', h*window.devicePixelRatio);

// then use css to bring it back to regular size
// or set it here
   c.setAttribute('style', 'width="'+w+'"; height="'+h+'";')
// or jQuery  $(c).css('width', w);
//      $(c).css('width', w);
//      $(c).css('height', h);

  // finally set the scale of the context
  c.getContext('2d').scale(window.devicePixelRatio, window.devicePixelRatio);

     canvas.renderAll();
}

我知道上面的代码块似乎适用于大多数人，但下面这行代码是不是不正确？

c.setAttribute('style', 'width="'+w+'"; height="'+h+'";')

这不是您定义内联样式的方式。您需要一个“:”而不是“=”，而且没有度量单位，所以我想知道它是如何工作的。

这是我为更有效地隔离问题而创建的新隔离页面的屏幕截图:这是直接 URL:http://xbit.x10host.com/isolation.php

您可以看到使用其他人都说有效的方法是如何行不通的。 CSS 属性值无效。也许我只是感到困惑，但即使我正确设置了 CSS 宽度和高度，我使用的是 1125x675 的 getImageData 还是新的 4500x1200？使用后者会导致样张图像过大； 4500x1200 包含我想要的所有数据，但还有所有这些空白。下面是该结果的屏幕截图。

现在，2250x1350(使用带有正确内联 CSS 语法的 goto 方法的输出)似乎是正确的，但我认为 Canvas 修复应该有助于输出与我的其他笔记本电脑相同的输出。这是否意味着拥有 HiDPI 显示器的人将比没有 HiDPI 显示器的人获得更高质量的样张图像(和打印件)？无论设备 DPI 如何，我都希望尺寸和像素数相同。

Answer 1

我发现了如何使图像的像素数与 DPI 无关。

它涉及使用离屏 Canvas 并以所需的宽度和高度在其上重新绘制屏幕上的 Canvas ，并以 300dpi 对离屏 Canvas 进行重新编码，以便无论屏幕分辨率如何，输出文件永远是一样的。