Back to Contacts or: Correcting the Lasik Fade

TODO: Fix this code so that it works with MDX - Current commented out

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

So, this happened today:

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

After a decade plus of fantastic, laser (errr, lasik) powered vision, my eyes started losing focus last year1. It’s not to bad, but it’s been bugging me. Probably more than most given my former life as a photographer.

I finally made it to the eye doc today and walked out with a new prescription for contacts. You know the, “you never forget how to ride a bike,” saying? Turns out, the same is true for putting contacts in.

Today wasn’t nearly as profound as the first time I got glasses and discovered what leaves on trees look like. Still, it’s nice to get that little extra bit of focus distance that was lacking2.


Footnotes

  1. This is not the near sightedness that’s almost certainly on the way. My distance vision is what diminished.

  2. Worth pointing out that I have no complaints about my history with Lasik. Paying for the surgery was some of the best money I’ve ever spent. Before going in, I couldn’t see the giant “E” that’s on top of the typical eye chart. Afterward, my eyes were a little better than 20/20. Something I didn’t even know was possible.

2017

Random Related Links