0

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.

1 Answer 1

-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".

2
  • As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center.
    – Community Bot
    Feb 22 at 22:05
  • I think you completely misunderstood the question my friend... I'm not trying to display images, I'm trying to modify images... raw image data I mean, i.e.: png/jpeg data that I have in memory in a byte array (Blob). CSS/HTML are of no use here.
    – Master_T
    Feb 23 at 10:25

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.