Image to HTML / CSS conversion using pure JS
After working on this for a while with other developers on Stack Overflow chat, the best solution I came up with (so far) was to use an asynchronous loop and adding nodes to a Document Fragment instead of adding them directly to the DOM.

The result:



document.addEventListener("DOMContentLoaded", function(event) {
 const file = document.getElementById('file');

 file.addEventListener('change', handleFile);

 function handleFile(e){
  document.getElementById('container').innerHTML = '';
  
  // Load image
  let img = new Image;
  img.src = URL.createObjectURL(e.target.files[0]);
  img.onload = function() {
   // Create canvas
   let canvas = document.createElement('canvas');
   let ctx = canvas.getContext('2d');
   canvas.width = img.width;
   canvas.height = img.height;

   // Draw image to canvas
   ctx.drawImage(img, 0, 0, img.width, img.height);
   
   let container = document.getElementById('container');
   container.style.width = img.width+'px';
   container.style.height = img.height+'px';

   let pixelData = ctx.getImageData(0, 0, img.width, img.height).data;
   let pixel = 0;
   let processedPixels = 0;
   let total = img.height*img.width;

   (function _asyncLoop(){
    let row = document.createElement('div');
    let fragment = document.createDocumentFragment();
    row.className = 'row';

    let rowPixels = 0;

    do {
     let col = document.createElement('div');
     col.className = 'col';

     col.style.cssText = 'background: rgba('+pixelData[pixel]+','+pixelData[pixel+1]+','+pixelData[pixel+2]+','+pixelData[pixel+3]+');';
     fragment.appendChild(col);
     processedPixels++;
     rowPixels++;
     pixel = pixel + 4;
    } while(rowPixels &lt; img.width);

    row.appendChild(fragment);
    document.getElementById('container').appendChild(row);

    if( processedPixels &lt; total ) setTimeout( _asyncLoop, 100 );
   }());

   URL.revokeObjectURL(img.src);
  }
 }
});
#container {
 margin-left: 50px;
 margin-top: 50px;
}
.row {
 overflow: auto;
}
.row {
 height: 1px;
}
.col {
 width: 1px;
 height: 1px;
 float:left;
}
&lt;body&gt;
 &lt;p&gt;Select an image from your computer and allow Javascript to draw it in the DOM using only DIV elements!&lt;/p&gt;
 &lt;input type='file' id='file'/&gt;
 &lt;div id='container'&gt;&lt;/div&gt;
&lt;/body&gt;