neocotic / convert-svg

Node.js packages for converting SVG into other formats using headless Chromium
MIT License
198 stars 45 forks source link

width/height derived from viewport sometimes results in cropped png image #55

Closed linusbrolin closed 2 years ago

linusbrolin commented 5 years ago

When converting an svg to png without providing width/height, or when providing only width (for example), the resulting image can sometimes be cropped.

I think this happens when the viewport dimensions in the svg file have decimals. If the decimal is low enough, the resulting dimensions will be rounded down instead of up, causing the resulting image to be cropped. It is especially noticable on images with a thin outer border, since the border may be completely cut off on the bottom or the right side of the image.

Edit: This section of the code in Converter.js causes it:

    await page.setViewport({
      height: Math.round(dimensions.height),
      width: Math.round(dimensions.width)
    });

    const output = await page.screenshot(Object.assign({
      type: provider.getType(),
      clip: Object.assign({ x: 0, y: 0 }, dimensions)
    }, provider.getScreenshotOptions(options)));

This will fix it:

    dimensions.height = Math.ceil(dimensions.height);
    dimensions.width = Math.ceil(dimensions.width);

    await page.setViewport({
      height: dimensions.height,
      width: dimensions.width
    });

    const output = await page.screenshot(Object.assign({
      type: provider.getType(),
      clip: Object.assign({ x: 0, y: 0 }, dimensions)
    }, provider.getScreenshotOptions(options)));
creadicted commented 4 years ago

Any news on this?

neocotic commented 2 years ago

I'm sorry for the incredibly long delay in replying in responding to you but life sometimes gets in the way of OSS development. I thank you for your patience and, although I'm closing this issue out, I hope you'll be glad to know that I believe this issue has been resolved in with today's 0.6.0 release with the addition of a new rounding API and CLI option to control how dimensions are rounded and supports the values; ceil, floor, and round (default).

If you continue to have this problem, please raise a new ticket with an SVG to reproduce the problem and, where possible, an expected and actual file of the output. I hope you can understand my delay.