FabricJS HiDPI getImageData答案

【问题标题】：FabricJS HiDPI getImageDataFabricJS HiDPI getImageData
【发布时间】：2019-05-14 05:54:51
【问题描述】：

我仍在收集理解 HTML5 中的 web 2 打印编辑器所需的部分。我正在使用 FabricJS 和一堆其他 3rd 方工具来实现它。

我的最新障碍是我的三星 Chromebook Pro，它有一个 HiDPI/视网膜显示屏。 window.devicePixelRatio 不同，我试图弄清楚如何使用 FabricJS 应对这种更高的 DPI。我遵循了其他人一直在说的成功的方法，但它似乎对我不起作用或对我没有帮助。另外，我的画布变得非常大，并且对象不再是可移动的。

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

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

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

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

任何帮助将不胜感激。我将在下面粘贴每个人都说正在工作的 sn-p。

注意：我的三星 Chromebook Pro 记录了 26562 字节写入，而我的联想 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（使用 goto 方法和正确的内联 CSS 语法输出）似乎是正确的，但我认为画布修复应该有助于输出与我的其他笔记本电脑相同的输出。这是否意味着拥有 HiDPI 显示器的人将获得比没有 HiDPI 显示器的人更高质量的校样图像（和打印）？无论设备 DPI 如何，我都希望尺寸和像素数相同。

【问题讨论】：

您在使用您共享的 sn-p 时看到的行为是什么？另外，你有什么“画布容器上的 CSS 变换”？（除非您正在谈论在 sn-p 中设置 CSS 高度/宽度）FWIW 您发布的这段代码是正确的，并且是处理此问题的标准方法；问题可能出在其他地方。
是的。请继续关注。我将从头开始一个全新的页面，并尝试进一步隔离问题。
我已经更新了问题。我有一个可用的输出，但我想知道是否以及如何在 HiDPI 和非 HiDPI 显示器上为像素提供相同的图像输出像素。

标签： javascript html canvas fabricjs hidpi

【解决方案1】：

我发现了如何使图像具有相同数量的像素，而不考虑 DPI。

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

【讨论】：