Change the image size according to its URL

Question

good morning! I researched (and even found a js called Holder.js that apparently does what I want, but I couldn’t understand it) a way to do the following: Image URL at 700x700 -> http://www.distribuidoramultmed.com.br/Imagens/BD/bancoDeDados.png

I want her to stay 200x200, so I’ll pass -> http://www.distribuidoramultmed.com.br/Imagens/BD/bancoDeDados.png/200x200 or http://www.distribuidoramultmed.com.br/Imagens/BD/bancoDeDados.png&h=200w200

In short, I need a way to "dynamically" modify the image size based on the URL. I looked it up, but I couldn’t find anything but Holder; Thank you!

Answer 1

this function is used to retrieve URL parameters:

var QueryString = function () {
  // This function is anonymous, is executed immediately and 
  // the return value is assigned to QueryString!
  var query_string = {};
  var query = window.location.search.substring(1);
  var vars = query.split("&");
  for (var i=0;i<vars.length;i++) {
    var pair = vars[i].split("=");
        // If first entry with this name
    if (typeof query_string[pair[0]] === "undefined") {
      query_string[pair[0]] = pair[1];
        // If second entry with this name
    } else if (typeof query_string[pair[0]] === "string") {
      var arr = [ query_string[pair[0]], pair[1] ];
      query_string[pair[0]] = arr;
        // If third or later entry with this name
    } else {
      query_string[pair[0]].push(pair[1]);
    }
  } 
    return query_string;
} ();

In your case, you will get the two measurement parameters of the img:

heightImg = QueryString.h
widthImg = QueryString.w

Now that you have the parameters, just change the image size:

$( "#IDimg" ).css( "width": widthImg, "height": heightImg );

Just a correction... when passing the parameters in the URL, it has to be in this format: URL?w=200&h=200 in your case would http://www.distribuidoramultmed.com.br/Imagens/BD/bancoDeDados.png?h=200w200

Answer 2

Holder.js aims to serve images for demonstrations - it’s not a script and/or plug-in for you to crop your image based on demands.

To fulfill your wish, crop an image based on a URL parameter, you will actually use server-side technology. An example is Gem Paperclip Rails - it does this for you with a lot of practicality.

If you want something more specific and detailed, you will have to create a new topic specific to this subject, because at the moment you want to know about how to perform this operation via Javascript.

Well, with Javascript the procedure is a little more... painful. The Backbone is a front-end platform that will streamline your service, but knowledge about Javascript as a whole will be super necessary.

Why is Backbone.js?

It has a mechanism of routes that can diagnose a request from your client and then do something based on that.

In simplified words, its routing provides the ability to observe the URL. If it is something like this: Imagens/BD/bancoDeDados.png/200x200, it can determine what should be done - this when the request is asynchronous -, which in this case is the (re)cut/(re)dimensioning of a rendered image based on a URL provided by your database - which will still require a request of type GET, still asynchronous, for the server.

For this other task - the clipping -, however, you will need a plug-in or learn how to make a device from scratch.

_{My recommendation is that you operate this with server technology.}