Initial commit.

This commit is contained in:
kj 2019-07-15 13:44:29 -04:00
commit d36b15b9ea
3 changed files with 101 additions and 0 deletions

24
index.html Normal file
View File

@ -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>

37
script.js Normal file
View File

@ -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)
}
}
}
}

40
style.css Normal file
View File

@ -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;
}