Note: the tool was updated to let you select and convert multiple files at the same time (among some other changes). Do let us know if this update broke anything by opening an issue on Github.
-
1. Select image(s)
-
-
Option 1: Select file(s)
+
1. Select image
-
-
-
Option 2: Enter URL
-
-
-
-
or
+
or
-
Option 3: Paste byte array
+
1. Paste byte array
x
@@ -588,147 +575,117 @@
inputs[i].value = inputs[1].value;
inputs[i].oninput();
}
+
}
};
allSameSizeButton.style.display = "block";
}
}
- // Handle selecting an image with the file picker or the url input
+ // Handle selecting an image with the file picker
function handleImageSelection(evt){
- // if 'evt' is a string, it means it came from the URL field,
- // otherwise it's from the file picker
- if (typeof evt === 'string' || evt instanceof String){
- var url = evt; // for readability
- var filename = url.split('/').pop();
- var request = new XMLHttpRequest();
- request.open('GET', url, true);
- request.responseType = 'blob';
- request.onload = function() {
- var file = request.response;
- file.name = filename;
- createFileReader(file);
- };
- request.onerror = function(){
- alert("Problem loading image from URL. Are you sure you entered a valid link to an image on the web?");
- };
- request.send();
+ var files = evt.target.files;
+ onlyImagesFileError.style.display = "none";
- }else{
- var files = evt.target.files;
- onlyImagesFileError.style.display = "none";
-
- if(files.length > 0){
- noFileSelected.style.display = "none";
- }else{
+ files.length > 0 ?
+ noFileSelected.style.display = "none" :
noFileSelected.style.display = "block";
+
+ for (var i = 0, f; f = files[i]; i++) {
+
+ // Only process image files.
+ if(!f.type.match('image.*')) {
+ onlyImagesFileError.style.display = "block";
+ continue;
}
- for (var i = 0, f; f = files[i]; i++) {
+ var reader = new FileReader();
- // Only process image files.
- if(!f.type.match('image.*')) {
- onlyImagesFileError.style.display = "block";
- continue;
- }
+ reader.onload = (function(file) {
+ return function(e) {
+ // Render thumbnail.
+ var img = new Image();
- createFileReader(f, files);
- }
- }
+ img.onload = function(){
- }
+ var canvas = document.createElement('canvas');
- function createFileReader(f, files){
- var reader = new FileReader();
+ var imageEntry = document.createElement('li');
+ imageEntry.setAttribute('data-img', file.name);
- reader.onload = (function(file) {
- return function(e) {
- // Render thumbnail.
- var img = new Image();
+ var w = document.createElement('input');
+ w.type = "number";
+ w.name = "width";
+ w.min = 0;
+ w.className = "size-input";
+ w.value = img.width;
+ w.oninput = function() { canvas.width = this.value; update(); };
- img.onload = function(){
+ var h = document.createElement('input');
+ h.type = "number";
+ h.name = "height";
+ h.min = 0;
+ h.className = "size-input";
+ h.value = img.height;
+ h.oninput = function() { canvas.height = this.value; update(); };
- var canvas = document.createElement('canvas');
+ var gil = document.createElement('span');
+ gil.innerHTML = "glyph";
+ gil.className = "file-info";
- var imageEntry = document.createElement('li');
- imageEntry.setAttribute('data-img', file.name);
+ var gi = document.createElement('input');
+ gi.type = "text";
+ gi.name = "glyph";
+ gi.className = "glyph-input";
+ gi.onchange = function() {
+ var image = images.get(img);
+ image.glyph = gi.value;
+ };
- var w = document.createElement('input');
- w.type = "number";
- w.name = "width";
- w.min = 0;
- w.className = "size-input";
- w.value = img.width;
- w.oninput = function() { canvas.width = this.value; update(); };
+ var fn = document.createElement('span');
+ fn.className = "file-info";
+ fn.innerHTML = file.name + " (file resolution: " + img.width + " x " + img.height + ")";
+ fn.innerHTML += " ";
- var h = document.createElement('input');
- h.type = "number";
- h.name = "height";
- h.min = 0;
- h.className = "size-input";
- h.value = img.height;
- h.oninput = function() { canvas.height = this.value; update(); };
+ var rb = document.createElement('button');
+ rb.className = "remove-button";
+ rb.innerHTML = "remove";
+ rb.onclick = function() {
+ var image = images.get(img);
+ canvasContainer.removeChild(image.canvas);
+ images.remove(image);
+ imageSizeSettings.removeChild(imageEntry);
+ if(imageSizeSettings.children.length == 1) {
+ allSameSizeButton.style.display = "none";
+ }
+ if(images.length() == 0) noFileSelected.style.display = "block";
+ update();
+ };
- var gil = document.createElement('span');
- gil.innerHTML = "glyph";
- gil.className = "file-info";
+ imageEntry.appendChild(fn);
+ imageEntry.appendChild(w);
+ imageEntry.appendChild(document.createTextNode(" x "));
+ imageEntry.appendChild(h);
+ imageEntry.appendChild(gil);
+ imageEntry.appendChild(gi);
+ imageEntry.appendChild(rb);
- var gi = document.createElement('input');
- gi.type = "text";
- gi.name = "glyph";
- gi.className = "glyph-input";
- gi.onchange = function() {
- var image = images.get(img);
- image.glyph = gi.value;
- };
+ imageSizeSettings.appendChild(imageEntry);
- var fn = document.createElement('span');
- fn.className = "file-info";
- fn.innerHTML = file.name + " (file resolution: " + img.width + " x " + img.height + ")";
- fn.innerHTML += " ";
+ canvas.width = img.width;
+ canvas.height = img.height;
+ canvasContainer.appendChild(canvas);
- var rb = document.createElement('button');
- rb.className = "remove-button";
- rb.innerHTML = "remove";
- rb.onclick = function() {
- var image = images.get(img);
- canvasContainer.removeChild(image.canvas);
- images.remove(image);
- imageSizeSettings.removeChild(imageEntry);
- if(imageSizeSettings.children.length == 1) {
- allSameSizeButton.style.display = "none";
- }
- if(images.length() == 0) noFileSelected.style.display = "block";
- update();
- };
-
- imageEntry.appendChild(fn);
- imageEntry.appendChild(w);
- imageEntry.appendChild(document.createTextNode(" x "));
- imageEntry.appendChild(h);
- imageEntry.appendChild(gil);
- imageEntry.appendChild(gi);
- imageEntry.appendChild(rb);
-
- imageSizeSettings.appendChild(imageEntry);
-
- canvas.width = img.width;
- canvas.height = img.height;
- canvasContainer.appendChild(canvas);
-
- images.push(img, canvas, file.name.split('.')[0]);
- place_image(images.last());
- // allSameSize(images, files);
+ images.push(img, canvas, file.name.split('.')[0]);
+ place_image(images.last());
+ allSameSize(images, files);
+ }
+ img.src = e.target.result;
};
- img.src = e.target.result;
- };
- })(f);
- reader.readAsDataURL(f);
- }
-
- function handleUrlInput() {
- handleImageSelection(document.getElementById('url-input').value);
+ })(f);
+ reader.readAsDataURL(f);
+ }
}
function imageToString(orientation, image){