Back to Contacts or Correcting the Lasik Fade

-- html

<script type="text/javascript">
var ImageLoaderDevV4 = function() {

};

ImageLoaderDevV4.prototype.url_to_call = function() {
  return this._url_template.replace('[WIDTH]', this.url_request_width()).replace('[HEIGHT]', this.url_request_height()).replace('[QUALITY]', this._quality).replace('[IMAGE_NAME]', this._image_name)
};

ImageLoaderDevV4.prototype.img_tag = function() {
  return '<img src="' + this.url_to_call() + '" width="' + this.render_width() + '" height="' + this.render_height() + '" />'
};

ImageLoaderDevV4.prototype.load_params = function(params) {
  // This is the core funciton that takes all possible inputs.
  // Convience methods will be used in production, but they will all communicate
  // load_params.

  // Required
  this._image_name = params["image_name"];
  this._viewport_height = params["viewport_height"];
  this._viewport_width = params["viewport_width"];
  this._raw_height = params["raw_height"];
  this._raw_width = params["raw_width"];
  this._url_template = params["url_template"];

  // Optional
  this._dpr = params["dpr"] ? params["dpr"] : 1;
  this._max_render_width = params["max_render_width"] ? params["max_render_width"] : params["raw_width"];
  this._percent_of_viewport_width = params["percent_of_viewport_width"] ? params["percent_of_viewport_width"] : 100;
  this._quality = params["quality"] ? params["quality"] : 80;

  // If `percent_of_viewport_height` is called, translate it into `_percent_of_viewport_width`.
  if("percent_of_viewport_height" in params) {
    this._percent_of_viewport_width = Math.floor(this._viewport_height * params["percent_of_viewport_height"] * this._raw_width / this._raw_height / this._viewport_width);
  }

};

ImageLoaderDevV4.prototype.render_height = function() {
  return  Math.floor(this._raw_height * this.render_width() / this._raw_width );
};

ImageLoaderDevV4.prototype.render_width = function() {
  return Math.floor(Math.min(this._max_render_width, (this._percent_of_viewport_width * .01 * this._viewport_width)));
};

ImageLoaderDevV4.prototype.url_request_height = function() {
  return this.render_height() * this._dpr;
};

ImageLoaderDevV4.prototype.url_request_width = function() {
  return this.render_width() * this._dpr;
};

var imageLoader = new ImageLoaderDevV4;
</script>

-- html

<div class="photoWrapper">
<script type="text/javascript">
imageLoader.load_params(
  {
    dpr: 2,
    image_name: "aws-20170106--1214-01a-.jpg",
    percent_of_viewport_width: 96,
    max_render_width: 700,
    quality: 85,
    raw_height: 1200,
    raw_width: 1600,
    viewport_height: window.innerHeight,
    viewport_width: window.innerWidth,
    url_template: "http://res.cloudinary.com/awsimages/image/upload/w_[WIDTH],h_[HEIGHT],q_[QUALITY]/i/[IMAGE_NAME]"
  }
);


document.write(imageLoader.img_tag());
</script>
</div>