FabricJS HiDPI getImageData

Question

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

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

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

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

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

我想我理解人们所说的缩放方法是成功的，但是我想知道由于我在canvas容器上进行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如何，我都希望尺寸和像素数相同。

Answer 1

我已经找到了如何使图像具有相同数量的像素而不管DPI。

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