Skip to content

Instantly share code, notes, and snippets.

@pbock

pbock/imagesize

Created April 18, 2015 13:14
Show Gist options
  • Save pbock/7eb7eaca648db45d1084 to your computer and use it in GitHub Desktop.
Save pbock/7eb7eaca648db45d1084 to your computer and use it in GitHub Desktop.
Download ZIP
Pick images and display their width and height
Raw
imagesize
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Image Size</title>
<style type="text/css">
body {
background-color: #ccc;
color: #333;
font: 20px "Helvetica Neue", sans-serif;
margin: 0;
min-height: calc(100vh - 70px);
position: relative;
}
form {
width: 100%;
height: 100%;
display: -webkit-flex;
-webkit-align-items: center;
position: absolute;
font-weight: 300;
-webkit-justify-items: center;
}
p {
text-align: center;
-webkit-flex: auto;
}
#file-list {
position: absolute;
top: 0;
left: 0;
margin: 0;
padding: 0;
list-style: none;
}
li {
box-sizing: border-box;
height: 3em;
display: -webkit-flex;
-webkit-align-items: center;
background-color: #fff;
width: 100vw;
}
li + li {
border-top: .5px solid #ccc;
}
img {
-webkit-flex: auto;
max-width: 3em;
max-height: 3em;
margin-right: .5em;
}
#target {
position: absolute;
opacity: 0;
width: 100vw;
height: 100%;
}
</style>
</head>
<body>
<form>
<input type="file" multiple id="target">
<ul id="file-list"></ul>
<p>Tap to select<br>one or more images</p>
</form>
<script type="text/javascript">
document.onreadystatechange = function () {
if (document.readyState == "interactive") {
var target = document.getElementById('target');
var list = document.getElementById('file-list');
target.addEventListener('change', function (ev) {
var files = ev.target.files;
list.innerHTML = '';
for (var i=0, file; file=files[i]; i++) {
if (!file.type.match(/^image\//)) continue;
(function () {
var li = document.createElement('li');
var img = document.createElement('img');
img.src = URL.createObjectURL(file);
li.innerText = 'Loading ' + file.name + '…';
list.appendChild(li);
img.onload = function () {
URL.revokeObjectURL(this.src);
var width = this.width;
var height = this.height;
var span = document.createElement('span');
li.innerText = '';
span.innerHTML = width + ' &times; ' + height + ' (W &times; H)';
li.appendChild(img);
li.appendChild(span);
};
})();
}
});
}
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment