search

kyranet / canvas-constructor

An ES6 utility for canvas with built-in functions and chained methods.
https://canvasconstructor.js.org
MIT License
116 stars 23 forks source link

Add options.fit to other methods print images #361

Open Wondermarin opened 4 years ago

Wondermarin commented 4 years ago

This is not only useful for circular images.

Add options.fit in Canvas#printImage. Add options.fit in Canvas#printRoundedImage.

Thank in advance.

kyranet commented 4 years ago

There's just one slight problem with this, printCircularImage was easy because the pivot is always in the center (x and y are always the centre of the image) and then the image is scaled keeping that in mind.

But in both printImage and printRoundedImage, this pivot is in the top left corner. What does this mean?

  1. A top-left pivot means the image will always print in the specified x and y coordinate, everything else will adjust to its container (even if that means leaving some empty space in the bottom). This is similar to how banners are drawn in many websites (YouTube, Patreon...). This approach is easy and I have written it recently for a game of mine, I can port it easily once I figure out how to re-use printCircularImage's fit code so I don't end up with code duplication.

  2. A pivot in the centre is certainly how the object-fit CSS property works, aligns well with printCircularImage's behaviour and can be used fairly easily with small modifications. I can think of it being useful for non-circular avatars.

Since both have their use-cases, I'll probably have to implement pivot, which will take time (and sadly will probably take over a month, my exams start in one week).

I guess I can implement the second one as it's the easiest and fastest way to implement it, and release when tested, then once I have time and I figure the maths out, add pivot taking [number, number].

Wondermarin commented 4 years ago

Well, we'll wait. Good luck with your exams!

Wondermarin commented 3 years ago

Is there any news?

NasZero commented 3 years ago

Im having the same issue.

My code has a printImage that has a diffrent size for each user. Because of this the width and height of the image isnt always the same which results in the image not filling the block at all or the image being too big for the block.

Would like to know if somebody has a fix for this.

kyranet commented 3 years ago

Sorry for the lack of activity in this issue.

Please feel free to make a PR implementing the utility method, I have had my hands full in the last year with university and other projects 😓