Javascript client library to resize images and change their canvas size

Question

I am developing a Javascript application (runs in the browser, not a Node app or similar) and I have a requirement: in my app I have images (jpegs and pngs) in Blob form and I want to manipulate them in the following way:

• I need to resize the images to a certain max resolution
• I need to bring the images to a specific aspect ratio (without distorting them, meaning: if the image is not already at the correct aspect ratio I want to add a filler color to the left/right or top/bottom in order to bring it to the desired aspect ratio)

The library needs to be free to use (gratis).

I have found libraries that can accomplish the first step (e.g.: Pica) but I'm having trouble finding something that fulfills my second requirement.

Answer 1

If you set width in percentage, the pictures get nicely resized. For more advanced setting, use code such as

.hide {display:none!important}
@media (min-width:1px) and (max-width: 587px) {.hide-small{display:none!important}}
@media (min-width:588px) and (max-width:900px) {.hide-medium{display:none!important}}
@media (min-width:901px) and (max-width:10000px) {.hide-large{display:none!important}}

The idea is that you code so that the javascript executed depends upon the screen size of the viewer.

For more info, search for "Responsive Web Design".