Initial commit.

2019-07-15 13:44:29 -04:00 · 2019-07-15 13:44:29 -04:00 · d36b15b9ea
commit d36b15b9ea
3 changed files with 101 additions and 0 deletions
--- a/index.html
+++ b/index.html
@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+  <head>
+    <meta charset="utf-8">
+    <title>Eliminar datos Exif de imágenes</title>
+    <link rel="stylesheet" href="style.css">
+  </head>
+  <body>
+    <div class="container">
+      <div id="input-area">
+        <h2>Elije una o varias imágenes:</h2>
+        <input type="file" name="" value="" id="imgI" multiple accept="image/*"><br>
+        <small>(Advertencia: Sólo funciona con imágenes JPG, JPEG y PNG.)</small>
+      </div><br>
+      <div id="dlarea">
+        <h2>Descargar Resultados:</h2>
+      </div>
+    </div>
+    <div class="footer">
+      Script creado por <a href="https://kj2.me">kj</a>
+    </div>
+    <script src="script.js" charset="utf-8"></script>
+  </body>
+</html>
--- a/script.js
+++ b/script.js
@ -0,0 +1,37 @@
+const input = document.getElementById('imgI')
+const dlarea = document.getElementById('dlarea')
+input.addEventListener('change', load)
+var files
+function load(){
+    files = this.files;
+    for(var i= 0; files.length > i ; i++){
+      process(files[i])
+    }
+}
+
+function process(file){
+  if(!file.type.match('image.*')){
+    return alert('Solo funciona con imágenes')
+  }
+  var fr = new FileReader()
+  fr.readAsDataURL(file)
+  fr.onload = (e)=>{
+    if( e.target.readyState == FileReader.DONE) {
+      var img = new Image()
+      var cv = document.createElement('canvas')
+      var ctx = cv.getContext('2d')
+      img.src = e.target.result
+      img.onload = ()=>{
+        cv.width = img.width
+        cv.height = img.height
+        ctx.drawImage(img, 0, 0)
+        var url = cv.toDataURL(file.type)
+        var a = document.createElement('a')
+        a.href = url
+        a.innerHTML = file.name
+        a.download = file.name
+        dlarea.appendChild(a)
+      }
+    }
+  }
+}
--- a/style.css
+++ b/style.css
@ -0,0 +1,40 @@
+body{
+  background: #f8f8f8
+}
+
+.container{
+  text-align: center;
+  margin-top: 5vh;
+  color: #fff;
+}
+
+.footer{
+  font-size: 10px;
+  position: absolute;
+  bottom: 10px;
+  right: 10px;
+}
+
+#dlarea a {
+  display: block;
+  color: #fff;
+  padding: 5px;
+  text-decoration: none;
+  border: 1px solid;
+}
+
+#input-area, #dlarea {
+  display: inline-block;
+  border-radius: 5px;
+  padding: 15px;
+  margin: 5px;
+  box-shadow: 0px 0px 5px black;
+}
+
+#input-area{
+  background: cornflowerblue;
+}
+
+#dlarea{
+  background: #4caf50;
+}