2

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

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

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

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

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

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

任何帮助，将不胜感激。我将粘贴每个人都说在下面工作的片段。

注意：我的三星 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 如何，我都希望尺寸和像素数相同。

4

1 回答 1

2

我发现了如何使图像具有相同数量的像素，而不管 DPI 是多少。

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

于 2018-12-15T17:18:36.590 回答