Trung tâm cá nhân
sách gpt4 ai đã đi

javascript - FabricJS HiDPI 获取图像数据

In lại 作者：行者123 更新时间：2023-11-30 19:57:42 hai mươi bốn 4
mua khóa gpt4 Nike

我仍在收集理解 HTML5 中的 Web 2 打印编辑器所需的内容。我正在使用 FabricJS 和许多其他第 3 方工具来实现它。

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

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

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

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

我想我明白人们所说的缩放方法是成功的，但我想知道它是否因为我在 Canvas 容器上的 CSS 转换而无法正常工作。我尝试通过控制台调整缩放比例和 Canvas 宽度/高度以及 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+'";')

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

这是我为更有效地隔离问题而创建的新隔离页面的屏幕截图:New Isolation Page这是直接 URL:http://xbit.x10host.com/isolation.php

您可以看到使用其他人都说有效的方法是如何行不通的。 CSS 属性值无效。也许我只是感到困惑，但即使我正确设置了 CSS 宽度和高度，我使用的是 1125x675 的 getImageData 还是新的 4500x1200？使用后者会导致样张图像过大； 4500x1200 包含我想要的所有数据，但还有所有这些空白。下面是该结果的屏幕截图。 nhập mô tả hình ảnh ở đây

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

1 Câu trả lời

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

它涉及使用离屏 Canvas 并以所需的宽度和高度在其上重新绘制屏幕上的 Canvas ，并以 300dpi 对离屏 Canvas 进行重新编码，以便无论屏幕分辨率如何，输出文件永远是一样的。

关于javascript - FabricJS HiDPI 获取图像数据，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53754683/

hai mươi bốn 4 0
Bài viết được đề xuất: c - 如何计算一个char*？
Bài viết được đề xuất: c - strncmp 比 strcmp 快吗
Bài viết được đề xuất: c - 如何在c中使用无参数的void函数返回一个值
Bài viết được đề xuất: c - 交换两个相邻元素的功能不起作用
行者123
Hồ sơ cá nhân

Tôi là một lập trình viên xuất sắc, rất giỏi!

Nhận phiếu giảm giá Didi Taxi miễn phí
Mã giảm giá Didi Taxi
Các bài viết nóng hổi trên toàn bộ trang web
Giấy chứng nhận ICP Bắc Kinh số 000000
Hợp tác quảng cáo: 1813099741@qq.com 6ren.com