Modify the image size according to its URL

2

Good morning! I searched (and even found a js named Holder.js that apparently does what I want, but I could not understand it) a way to do the following: Image Url at 700x700 - > link

I want it to stay 200x200, so step - > link or link

In short, I need a way to "dynamically" modify the image size based on the URL. I researched but could not find anything besides the Holder; Thanks!

    
asked by anonymous 01.08.2014 / 14:48

2 answers

3

This function is used to get 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 size of the image:

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

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

    
01.08.2014 / 15:00
2

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

To accomplish your desire, cut an image based on a URL parameter, you will actually use technology on the server side. An example is Rails's Paperclip gem - it does it for you with great convenience.

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 how to perform this operation via JavaScript.

Well, with JavaScript the procedure is a bit more ... painful . Backbone is a front-end platform that will streamline your service, but knowledge of JavaScript across the whole will be super-necessary.

Why Backbone.js?

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

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 is when the request is asynchronous - which in this case is (re) cutting / (re) scaling of a rendered image based on a URL made available by your database - which will still require a GET request, still asynchronous, to the server.

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

    

01.08.2014 / 15:06