Enhancement: support premultiplied raw pixel input

[justewg]

Thanks for utility, great work.
I use the utility inside the map-tile-server-gl node-app. Server configuration when rendering raster tiles allows you to set the color of the lines in rgba. But as a result, PNG-images enclose a gray or black substrate under the translucent white color. Result on the attached screenshot.
Images on the server are created as follows:

var image = sharp(data, {
          raw: {
            width: params.width * scale,
            height: params.height * scale,
            channels: 4
          }
        })
...
image.png()

I tried using .embed (), .ensureAlpha (), passing the create parameter to the constructor, pointing to background with transparent white, but it didn’t work.
How do I get a white backing in white translucent color, or do I get a 24-bit PNG supporting translucent colors?

[lovell]

Hello, what is the source of data? Could it have been premultiplied?

What does ... refer to in this code sample? Are you able to provide a standalone code sample and input image data that exhibits this behaviour?

[justewg]

https://github.com/klokantech/tileserver-gl/blob/master/src/serve_rendered.js
lines from 417 to 451

[lovell]

mapbox/mapbox-gl-native#9124

"The Node binding however, returns the premultiplied image buffer as is"

[justewg]

Sorry, I didn't quite understand what it was about in this post.
The point is that in any case, the image will be with a gray stroke under the translucent pixels?

[lovell]

It looks like tileserver-gl uses mapbox-gl-native to render, which returns RGBA data that has been premultiplied. This is what's causing the artifacts you're seeing on (semi-)transparent pixels.

The quick fix would probably be to modify tileserver-gl to unpremultiply pixel values before passing them to sharp - there's an example of what's required to do this in consbio/mbgl-renderer#25

[justewg]

Thanks for help, I've add the issue to server's author, because haven't found the solution myself. The are no using mbgl-renderer as javascript-library, I see only mbgl/renderer c-sources and can't move futher, unfortunately

[lovell]

Let's leave this open to track a future possible enhancement to flag premultiplied raw pixel data input via an additional property on the raw object.

[lovell]

v0.28.2 now available with support for this via the following API:

sharp(input, { raw: { premultiplied: true, ... } })...