FabricJS HiDPI 获取图像数据

Question

我仍在收集了解 HTML5 中的 Web 2 打印编辑器所需的资料。我正在使用 FabricJS 和一堆其他第 3 方工具来实现它。

我最近的障碍是我的三星 Chromebook Pro，它有一个 HiDPI/retina 显示屏。 window.devicePixelRatio 是不同的，我正在尝试弄清楚如何使用 FabricJS 来应对这种更高的 DPI。我按照其他人所说的成功了，但它似乎不起作用或对我没有帮助。再加上我的canvas变得特别大，物体都不能动了。

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

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

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

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

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

注意：我的三星 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+'";')

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

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

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

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

Answer 1

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

它涉及使用离屏 canvas 并以所需的宽度和高度在屏幕上重新绘制 canvas ，并对离屏重新编码 canvas 在 300dpi 下，无论屏幕分辨率如何，输出文件都将始终相同。

FabricJS HiDPI 获取图像数据

FabricJS HiDPI getImageData

html

javascript

canvas

fabricjs

hidpi