FabricJS HiDPI getImageData

Question

我仍在收集在HTML5中理解web 2打印编辑器所需的部分。我正在使用FabricJS和其他一些第三方工具来使其成为可能。

我最近的障碍是我的三星Chromebook Pro，它有一个HiDPI/视网膜显示器。window.devicePixelRatio是不同的，我正试图找出如何使用FabricJS来应对这个更高的新闻部。我遵循了其他人一直说的成功的话，但这似乎不起作用，也无助于我。此外，我的画布变得非常大，物体不再是可移动的。

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

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

由于所有第三方资产，我愿意提供一个直接链接，而不是一个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+'";')

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

下面是我为更有效地隔离问题而创建的新隔离页面的屏幕截图：

以下是直接网址：http://xbit.x10host.com/isolation.php

你可以看到，如何使用其他人都说的方法，工作不起作用。CSS属性值无效。也许我只是有点困惑，但即使我正确地设置了CSS的宽度和高度，我是将1125x675用于getImageData还是使用新的4500x1200呢？使用后者会导致证明图像太大；4500x1200包含我想要的所有数据，但是还有所有的空白。下面是这个结果的截图。

​

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

Answer 1

我已经知道了如何使图像具有相同的像素数，而不管DPI是什么。

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