通过转换为过采样位图然后缩小尺寸来消除矢量图形中的细线 - 如何使用 ImageMagick?

发布于 2025-01-10 04:00:18 字数 930 浏览 1 评论 0 原文

  • 我使用 Apple Numbers(一款带有样式选项的电子表格应用程序)来创建应用程序的各种用户界面的 UX 流程图。

  • Apple Numbers 具有 PDF 导出选项。

  • 问题是,即使表格中的某些边框线在导出中已设置为“无”,您仍然会得到可见的细小细线,请参阅此剪切图:

[UI 设计中不需要的细线

我想

在在图形上创建天桥视频之前通过图像处理消除细线。

我的基本想法是:

  1. 将矢量转换为具有非常高分辨率的位图(过采样,例如到 600 或 1200 DPI),
  2. 然后使用消除细线(在相邻像素的主导地位中消失)的算法下采样到目标分辨率(例如 150 DPI)同时总体上仍然尽可能保持清脆和锐利。

所以第一步,我已经通过这两种可能性弄清楚了

  • : Apple Preview 具有 PDF 到 PNG 导出选项,您可以在其中指定 DPI。
  • b. ImageMagick convert -密度 600 source.pdf export.png

但对于第 2 步,有很多可能性:

resample -filter -resize 25%-scale 12.5%(当从 1200 到 150 时)

请告诉我应使用哪种方法(重新采样、调整大小、缩放)以及哪种插值算法或过滤器用于实现我的目标,即通过将细线溶解到相邻像素中来消除细线,而其余部分(正常的 1px 线、渲染的文本和符号等)尽可能保持清晰。

  • I used Apple Numbers (a Spreadsheet app with styling options) to create a UX flowchart of various user interfaces of an app.

  • Apple Numbers has a PDF export option.

  • The problem is that even though some border lines in the table have been set to "none" in the export you nevertheless get small visible hairlines, see this cutout:

[Undesired hairlines in UI design

I want to to eliminate the hairlines by image processing

Before creating a flyover video over the graphics.

My basic idea is:

  1. Convert vector to bitmap with very high resolution (oversampling, e.g. to 600 or 1200 DPI)
  2. Then downsample to the target resolution (e.g. 150 DPI) with an algorithm which eliminates the hairlines (disappearing in the dominance of neighboring pixels) while overally still remaining as crisp and sharp as possible.

So step 1, I already figured out, by these two possibilities:

  • a. Apple Preview has a PDF to PNG export option where you can specify the DPI.
  • b. ImageMagick convert -density 600 source.pdf export.png

But for step 2 there are so many possibilities:

resample <DPI> or -filter <FilterName> -resize 25% or -scale 12.5% (when from 1200 to 150)

Please tell me by which methods (resample, resize, scale) and which of the interpolation algorithms or filters I shall use to achieve my goal of eliminating the hairlines by dissolving them into their neighboring pixels, with the rest (normal 1px lines, rendered text and symbols, etc) remaining as crisp as possible.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

ヤ经典坏疍 2025-01-17 04:00:18
  1. 使用不同 DPI 设置的 ImageMagick PDF tp PNG 转换:
    转换-密度XXX流程图.pdf流程图-ImageMagick-XXX.png
  • 流程图-ImageMagick-150.png;流程图-ImageMagick-300.png ;流程图-ImageMagick-600.png
  1. Apple 预览 PDF 到 PNG 使用不同的 DPI 设置导出:
  • 流程图-ApplePreview-150.png ;流程图-ApplePreview-300.png ;流程图-ApplePreview-600.png
  1. 不同的缩小处理
  • a) convert -median 3x3 -resize 50% 流程图-ApplePreview-300.png 流程图-150-from-ApplePreview-300-median-3x3.png感谢@ChristophRackwitz的提示


  • b ) convert -filter Box -resize 25% 流程图-ImageMagick-600.png流程图-150-from-ImageMagick-600-resize-box.png

比较

流程图-ApplePreview-150.png

流程图-ApplePreview-150

flowchart-150-from-ApplePreview-300-median-3x3.png

flowchart-150-from-ApplePreview-300-median-3x3

  • ✅ 发际线消失了
  • ❌ 但字体不再那么清晰,中值破坏了这一点。

flowchart-150-from-ImageMagick-600-resize-box.png

flowchart-150-from-ImageMagick-600-resize-box

  1. ImageMagick PDF tp PNG conversion with different DPI settings:
    convert -density XXX flowchart.pdf flowchart-ImageMagick-XXX.png
  • flowchart-ImageMagick-150.png ; flowchart-ImageMagick-300.png ; flowchart-ImageMagick-600.png
  1. Apple Preview PDF to PNG export with different DPI settings:
  • flowchart-ApplePreview-150.png ; flowchart-ApplePreview-300.png ; flowchart-ApplePreview-600.png
  1. Different downscaling processings
  • a) convert -median 3x3 -resize 50% flowchart-ApplePreview-300.png flowchart-150-from-ApplePreview-300-median-3x3.png thanks to the hint from @ChristophRackwitz

  • b) convert -filter Box -resize 25% flowchart-ImageMagick-600.png flowchart-150-from-ImageMagick-600-resize-box.png

Comparison

flowchart-ApplePreview-150.png

flowchart-ApplePreview-150

flowchart-150-from-ApplePreview-300-median-3x3.png

flowchart-150-from-ApplePreview-300-median-3x3

  • ✅ Hairlines gone
  • ❌ But font is not as crisp anymore, median destroyed that.

flowchart-150-from-ImageMagick-600-resize-box.png

flowchart-150-from-ImageMagick-600-resize-box

  • ???? Overally still quite crisp
  • ???? Hairline only very very faint, even only faint when zoomed in

Both variants are somehow good enough for my KenBurns / Dolly cam ride over them. Still I wished that there'd be an algorithm that keeps cripness but still eliminates 1px lines in very high DPI bitmaps. But I guess this is a Jack of all trades only in my phantasy.

Processing Durations

  • MacBook Pro 15'' (Mid 2014, 2,5 GHz Quad-Core Intel Core i7)

ImageMagick PDF to PNG

  • PDF source Ca. 84x60cm (33x23'')
  • 300dpi -> 27s
  • 600dpi -> 1m58s
  • 1200dpi -> 37m34s

ImageMagic Downscaling

time convert -filter Box -resize 25% [email protected] [email protected]
# PNG @ 39700 × 28066:  135.57s user   396.99s system   109%  cpu   8:08.08 total

time convert -median 3x3 -resize 50% [email protected] [email protected]
# PNG @ 19850 × 14033:  311.48s user     9.42s system   536% cpu      59.76 total

time convert -median 3x3 -resize 50% [email protected] [email protected]
# PNG @ 19850 × 14033:  237.13s user     8.33s system   544% cpu      45.05 total
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文