Home > Software engineering >  Eliminate hairlines from a vector graphics by converting to oversampled bitmap and then downscaling
Eliminate hairlines from a vector graphics by converting to oversampled bitmap and then downscaling

Time:02-27

  • 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.

CodePudding user response:

  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

  • Related