Resize and preserve image orientation before upload

I need to downscale images on mobile phonesr to save bandwidth Here is my code based on http://www.codeforest.net/html5-image-upload-resize-and-crop. No need for any complicated plugins. Take care of some security holes…

<html>
<head>
<script src="jquery-1.11.1.min.js"></script>
<?php if ($_POST) {
  $img = $_POST['image'];
  $img = str_replace('data:image/jpeg;base64,', '', $img);
  $img = str_replace(' ', '+', $img);
  $data = base64_decode($img);
  $file = 'cache/' . uniqid() . '.jpg';
  file_put_contents($file, $data);
}
?>
</head>

<body>
<form>
<input type="text" value="" name="text" id="text"/>
<input type="file" name="filesToUpload[]" id="filesToUpload" multiple="multiple" />
<input type="button" id="button" value="submit">
</form>

<script>
$('#button').click(function(){

 if (window.File && window.FileReader && window.FileList && window.Blob) {
   var files = document.getElementById('filesToUpload').files;
   for(var i = 0; i < files.length; i++) {
     resizeAndUpload(files[i]);
   }
 }
 else {
   alert('not supported');
 }
});

function resizeAndUpload(file) {
  var reader = new FileReader();
  reader.onloadend = function() {
    var tempImg = new Image();
    tempImg.src = reader.result;
    tempImg.onload = function() {
      var max_width = 500;
      var max_height = 500;
      var tempW = tempImg.width;
      var tempH = tempImg.height;
      if (tempW > tempH) {
        if (tempW > max_width) {
          tempH *= max_width / tempW;
          tempW = max_width;
        }
      }
      else {
      if (tempH > max_height) {
        tempW *= max_height / tempH;
        tempH = max_height;
      }
   }
   var canvas = document.createElement('canvas');
   canvas.width = tempW;
   canvas.height = tempH;
   var ctx = canvas.getContext("2d");
   ctx.drawImage(this, 0, 0, tempW, tempH);
   var dataURL = canvas.toDataURL("image/jpeg");
   var xhr = new XMLHttpRequest();
   xhr.onreadystatechange = function() {
     if (xhr.readyState == 4 && xhr.status == 200) {
       location.reload();
     }
   };
   xhr.open('POST', 'index.php', true);
   xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
   var input = document.getElementById("text");
   var inputData = encodeURIComponent(input.value);
   var data = 'text=' + inputData + '&image=' + dataURL;
   xhr.send(data);
   }
 }
}
</script>

</body>
</html>

The big issue when running that with multiple phones is image orientation.
To save computing power many mobiles are just save their sensor data without caring about too much about orientation as long as orientation is written in the exif tag.
Here are the 8 possible orientations

ORIENTATION
	TOP	LEFT    
1	top	left
2	top	right
3	bottom	right
4	bottom	left
5	left	top
6	right	top
7	right	bottom
8	left	bottom

I therefore added canvas rotation / flipping after getting image orientation from https://github.com/blueimp/JavaScript-Load-Image. The revised function now looks like

function resizeAndUpload(file) {
  var reader = new FileReader();
  reader.onloadend = function() {
    var can = document.createElement('canvas'); 
    var ctx = can.getContext("2d");
    var thisImage = new Image();
    thisImage.src = reader.result;
    thisImage.onload = function() {    
      var max_width = 1500;
      var max_height = 1500;
      var tempW = thisImage.width;
      var tempH = thisImage.height;
      if (tempW > tempH) {
        if (tempW > max_width) {
          tempH *= max_width / tempW;
          tempW = max_width;
        }
      }
      else {
        if (tempH > max_height) {
          tempW *= max_height / tempH;
          tempH = max_height;
        }
      }
      can.width  = tempW;
      can.height = tempH;
      ctx.save();
      var width  = can.width;  var styleWidth  = can.style.width;
      var height = can.height; var styleHeight = can.style.height;
      if (orientation>1) {
        if (orientation > 4) {
          can.width  = height; can.style.width  = styleHeight;
          can.height = width;  can.style.height = styleWidth;
        }
        switch (orientation) {
          case 2: ctx.translate(width, 0);     ctx.scale(-1,1); break;
          case 3: ctx.translate(width,height); ctx.rotate(Math.PI); break;
          case 4: ctx.translate(0,height);     ctx.scale(1,-1); break;
          case 5: ctx.rotate(0.5 * Math.PI);   ctx.scale(1,-1); break;
          case 6: ctx.rotate(0.5 * Math.PI);   ctx.translate(0,-height); break;
          case 7: ctx.rotate(0.5 * Math.PI);   ctx.translate(width,-height); ctx.scale(-1,1); break;
          case 8: ctx.rotate(-0.5 * Math.PI);  ctx.translate(-width,0); break;
        }
      }
      ctx.drawImage(thisImage,0,0,tempW,tempH);
      ctx.restore();
    }
    var dataURL = canvas.toDataURL("image/jpeg");
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function() {
      if (xhr.readyState == 4 && xhr.status == 200) {
        location.reload();
      }
    };
    xhr.open('POST', 'index.php', true);
    xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
    var input = document.getElementById("text");
    var inputData = encodeURIComponent(input.value);
    var data = 'text=' + inputData + '&image=' + dataURL;
    xhr.send(data);
  }
}

Arrange divs by row while aligning them vertically?

Seems there is a real problem ;-) even with valuable SO comments at hand. In the first instance I tried to float all divs. But even when clearing floats this always left a vertical gap. In a second attempt, I used a table but this wasn’t really responsive design. Next, I tried CSS3 multi-column layout

#container {
    margin: 0 auto; 
    column-count: 3;
    column-gap: 2px;
    width: 320px;
    background-color: white;
}

This works as expected (jsfiddle).

screen

and could be even responsive when adding some code for smaller screens

@media screen and (max-width: 1450px) {
  #inner {
    max-width:950px;
    margin: 0 auto;
    -moz-column-count: 2;
    -webkit-column-count: 2;
    column-count: 2;
  }
}
@media screen and (max-width: 950px) {
  #inner {
    max-width:480px;
    margin: 0 auto;
    -moz-column-count: 1;
    -webkit-column-count: 1;
    column-count: 1;
  }
}

jsfiddle looks great but we are soon running into another problem. Whenever adding more divs as the database is updated, the whole layout gets re-arranged column-wise which is very confusing to the viewer. The same happens with flexbox (attempt #4), currently there is no CSS solution at all. You need some JS layout cheating (codepen).

How to switch divs on or off – a super neat trick

I want to hide a div container as it clutters my otherwise clean picture display. And I found some javascript – free, CSS only solution: the  checkbox hack. Modified it a bit while it looks now like this

<label for="t">license me...</label>
<input id="t" type="checkbox" />
<div id="buy">price</div>
input[type=checkbox] {position: absolute;
 top: -9999px; left: -9999px; }
label { border:none; cursor: pointer; }
label:hover { border-bottom:1px solid #444; }
div#buy { display:none; }
input[type=checkbox]:checked ~ div#buy
 { display: block; }

You get the idea: whenever the label of the unvisible checkbox is being clicked, the display state of the div container is changing between on to off.

The brain is not a computer

aeon.co/essays has a a long and convincing plea

Our shoddy thinking about the brain has deep historical roots, but the invention of computers in the 1940s got us especially confused. For more than half a century now, psychologists, linguists, neuroscientists and other experts on human behaviour have been asserting that the human brain works like a computer … we are not born with: information, data, rules, software, knowledge, lexicons, representations, algorithms, programs, models, memories, images …
computers really do operate on symbolic representations of the world. They really store and retrieve. They really process. They really have physical memories. They really are guided in everything they do, without exception, by algorithms…
The idea that memories are stored in individual neurons is preposterous: how and where is the memory stored in the cell?

Indeed, all NMR studies tell us, that many brain areas are being involved in simple tasks. I just wonder why all the current research money goes into human brain mapping projects? We know, it doesn’t work and it is not just a matter of poor organization.

I particular liked the objection of aeon.co that human consciousness acts like computer software. Just bits and bytes get immoral as shown in the movie Transcendence (2014) with disastrous results for humanity. Or like with the Twitter bot Tay that had to be shut down due to its inability to recognize when it was making offensive or racist statements.