Sunday, January 26, 2014

Resizing Images in the Browser using an HTML Canvas

Nothing pleases me more than not having to upload an image from someone's computer and use my server to resize the image. Being able to use the browser to acquire the file, resize it to something reasonable, and only upload it after the user previews it and decides its correct saves both bandwidth and server resources. However, as great as it sounds, there's always a catch. On the server-side, you can control the resources and processes used to resize the image. On the client-side, you have less control. Different resources and browsers limit your ability to use any method you can conjure up to perform the resize operation. Users tend to be fickle about their browser locking up or, worse, crashing when they attempt to open an unusually large 15Mb JPEG image of their dog, Sammy. Even if you can avoid that problem, you may find the resize of the image looks undesirable due to how the browser resampled it.

The easiest way to resize an image is to draw it into a smaller canvas object and then pull the data URL from the canvas with the resized image:

   var baseImg = $( '#base' )[0],
       outImg = $ctr.find( '.resize1' )[0],
       canvas, context;

   canvas = document.createElement( 'canvas' );
   canvas.width = baseImg.width;
   canvas.height = baseImg.height;
   context = canvas.getContext( '2d' );
   context.drawImage( baseImg, 0, 0, baseImg.width, baseImg.height );

   outImg.src = canvas.toDataURL();

Below is a test image with a resolution of 1024 X 768 pixels and a file size of about 2.4 Mb. I placed it in an image tag with a max-height of 400px which will force the browser to scale the image. When those properties are queried in the resize operation above, they report the size of the rendered image on the screen and not the original size. Because of this, the resulting canvas image will then be sized at the desired 400 X 300 pixels and the new file size will be 78 Kb:

Sunday, January 19, 2014

RequireJS Optimization and Dynamic Loading of Shimmed Libraries

I've written a few posts about building module web application using RequireJS as a centerpiece to manage dependencies and help reduce load times. One challenge you encounter when using this design strategy is that not every library you need to use in your application is RequireJS aware. Fortunately, this is accounted for in the RequireJS configuration options in the form of a "shim". However, as I learned when working out all the details of my release life-cycle, there are some caveats you need to address when working with the RequireJS optimizer and dynamically loading shimmed libraries. Before addressing those issues, let me create some context by explaining how I setup my application for development and ready it for release.

Sunday, January 5, 2014

CSS Rotated Text: Parent Dimensions and Spacing Issues

Rotating text with CSS seemed like an great solution to my space problem. I have a table of narrow columns but need labels that will not fit in that space. Rotating them 90 degrees would fix the problem. However, fixing one problem only exposed another issue. The following examples will use this block of HTML to define the content for the columns that need to be rotated.

  <ul class="list-unstyled">
      <li><span>A column label</span></li>
      <li><span>Much longer than the last</span></li>
      <li><span>Another label</span></li>
      <li><span>The final column</span></li>

Without any rotation, the markup renders like this:

  • A column label
  • Short
  • Much longer than the last
  • Another label
  • The final column

Now, let's try to apply a transform to rotate the text.