data-polyflif-scale does not resize correctly

[polarity]

Using data-polyflif-scale scales the image wrong (i think). The canvas get´s the right size but the image inside is smaller. Is there a known workaround for this? Tried to come up with a solution or a PR but im not firm with C++ and the tooling.

top: orginal png bottom: sized flif in the canvas

[MarieSchweiz]

To be useful in the future for designers (which will probably make the format a bit more attractive) i'd like to add, an image should fit exactly in the canvas (btw the other way around, include ratio). So you are able to manipulate it.

The canvas bzw rendering size should be based on the window size. That way, you can use this as a real solution for all of your pixel based assets. My suggestion is it shouldn't be "placed" or manipulated inside the canvas.

just fit. And CSS will do the rest and position the canvas. I'd be very grateful if we could find a solution for that.

[hrj]

@polarity What are the dimensions of the original image? If I remember right, FLIF tries to fit an integral image within the given bounds. If the original image is ~351~ 301 pixels high, and you specify 150 pixels for the scaled image, then FLIF is forced to decode to the next lower size (76 pixels high).

I know this is a bit counter-intuitive, but I hope that helps solve your immediate concern.

---

@MarieSchweiz I suppose the problem with that approach is that there is no callback for completion of layout of an HTML element (such as the canvas element). If my understanding is right, the library would have to poll for layout changes. Or, the library could check for the layout of canvas elements just once, maybe in window.onLoad().

I will think some more about this. For now, as a workaround, this library provides a low-level API, so the application layer can implement such a feature by itself.

I welcome more thoughts / suggestions.

[hrj]

@MarieSchweiz Actually, scratch what I said earlier. The dimensions of the canvas as determined by CSS are different from the dimension attributes of the canvas element. I was confusing the two; my bad.

I now realize what you meant. It basically amounts to downscaling / upscaling the image automatically to the specified width & height in the data-polyflif-scale attribute. I will try to implement that. I will create a separate issue for it, although I think it is the same problem that @polarity is facing.

[hrj]

Ok, I found out that upstream FLIF has an option to "fit" specified size automatically, and I am using that in polyFLIF now.

You can expect next release to work correctly!

[jonsneyers]

Note that --fit uses stupid downsampling to do the fitting (having a proper downscaling algorithm was decided to be out of scope for the FLIF decoder). So you're still better off using --resize to twice the target dimensions, which will give you something that should be at least as large as the target dimensions (it could be twice as large, or 1 pixel larger, or anything in between). Then you can either just let the browser downscale it from there, or do that in JS if it's easy to do.

[hrj]

Yup, I am now convinced that PolyFLIF needs to do the up-decode and down-scale dance, when higher quality is desired.

Am tracking it as an enhancement in a #31