javascript - FabricJS HiDPI getImageData

我仍在收集了解HTML5中的Web 2打印编辑器所需的内容。我正在使用FabricJS和许多其他第三者工具来使其成为可能。

我最新的障碍是我的Samsung Chromebook Pro，它具有HiDPI /视网膜显示屏。 window.devicePixelRatio是不同的，我正在尝试找出如何使用FabricJS处理更高的DPI。我遵循了其他人一直说的成功的说法，但是它似乎没有用或不能帮助我。另外，我的画布变得非常大，并且对象不再可移动。

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

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

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

我想我知道人们说的缩放方法成功了，但是我想知道它是否由于画布容器上的CSS转换而无法正常工作。我尝试过通过控制台调整缩放比例以及画布的宽度/高度和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方法输出）似乎是正确的，但我认为画布修复应该有助于输出与其他笔记本电脑相同的输出。这是否意味着具有HiDPI显示器的人将获得比没有HiDPI显示器的人更高质量的图像（和打印品）？无论设备DPI如何，我都希望尺寸和像素数相同。

最佳答案

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

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