Geolocalizador de Im\u00e1genes Manual<\/title>\n\n \n <link rel=\"stylesheet\" href=\"https:\/\/unpkg.com\/leaflet\/dist\/leaflet.css\" \/>\n \n <script src=\"https:\/\/unpkg.com\/leaflet\/dist\/leaflet.js\"><\/script>\n \n <script src=\"https:\/\/cdn.rawgit.com\/exif-js\/exif-js\/master\/exif.js\"><\/script>\n \n <script src=\"https:\/\/unpkg.com\/piexifjs\"><\/script>\n\n <style>\n #map {\n height: 400px;\n width: 100%;\n cursor: crosshair; \/* Cambiar el cursor a un puntero de cruz *\/\n }\n .coordinates {\n display: flex;\n justify-content: space-around;\n margin-top: 20px;\n }\n .coordinates input {\n width: 45%;\n }\n <\/style>\n<\/head>\n<body>\n <center><h2>Geolocaliza tu imagen<\/h2><\/center>\n\n \n <div id=\"map\"><\/div><br \/>\n\n \n <div class=\"coordinates\">\n <label for=\"latitudeInput\">Latitud:\n <input type=\"text\" id=\"latitudeInput\" placeholder=\"Introduce latitud\" \/>\n <\/label>\n\n <label for=\"longitudeInput\">Longitud:\n <input type=\"text\" id=\"longitudeInput\" placeholder=\"Introduce longitud\" \/>\n <\/label>\n <\/div>\n\n <br \/>\n \n <input type=\"file\" id=\"imageInput\" accept=\"image\/*\" \/><br \/><br \/>\n\n \n <button id=\"saveLocationBtn\">Guardar Geolocalizaci\u00f3n y Descargar<\/button>\n\n <p id=\"status\"><\/p>\n\n <script>\n \/\/ Inicializamos variables para las coordenadas seleccionadas y el archivo de imagen\n let selectedLatLng = null;\n let imageFile = null;\n\n \/\/ Inicializa el mapa con Leaflet y OpenStreetMap\n const map = L.map('map').setView([40.416775, -3.703790], 5); \/\/ Madrid como vista inicial\n\n L.tileLayer('https:\/\/{s}.tile.openstreetmap.org\/{z}\/{x}\/{y}.png', {\n attribution: '\u00a9 OpenStreetMap contributors'\n }).addTo(map);\n\n \/\/ Al hacer clic en el mapa, actualizar los campos de latitud y longitud sin alerta\n map.on('click', function (e) {\n selectedLatLng = e.latlng;\n document.getElementById('latitudeInput').value = selectedLatLng.lat;\n document.getElementById('longitudeInput').value = selectedLatLng.lng;\n });\n\n \/\/ Carga la imagen seleccionada\n document.getElementById('imageInput').addEventListener('change', function (e) {\n imageFile = e.target.files[0];\n });\n\n \/\/ Funci\u00f3n para guardar las coordenadas en los metadatos EXIF de la imagen y descargarla\n document.getElementById('saveLocationBtn').addEventListener('click', function () {\n const latInput = document.getElementById('latitudeInput').value;\n const lngInput = document.getElementById('longitudeInput').value;\n\n if (!latInput || !lngInput || !imageFile) {\n alert(\"Por favor, introduce latitud y longitud y carga una imagen.\");\n return;\n }\n\n const lat = parseFloat(latInput);\n const lng = parseFloat(lngInput);\n\n const reader = new FileReader();\n reader.onload = function (event) {\n const base64Image = event.target.result;\n const exifObj = piexif.load(base64Image);\n\n \/\/ Prepara los datos de GPS\n const gpsData = {\n GPSLatitude: [[Math.abs(lat), 1], [0, 1], [0, 1]],\n GPSLatitudeRef: lat >= 0 ? 'N' : 'S',\n GPSLongitude: [[Math.abs(lng), 1], [0, 1], [0, 1]],\n GPSLongitudeRef: lng >= 0 ? 'E' : 'W'\n };\n\n \/\/ Inserta los datos de GPS en los metadatos EXIF\n exifObj['GPS'] = gpsData;\n\n \/\/ Inserta los nuevos datos en la imagen\n const newExif = piexif.dump(exifObj);\n const newImage = piexif.insert(newExif, base64Image);\n\n \/\/ Convertir base64 a Blob para poder descargarlo como archivo\n const byteString = atob(newImage.split(',')[1]);\n const mimeString = newImage.split(',')[0].split(':')[1].split(';')[0];\n const ab = new ArrayBuffer(byteString.length);\n const ia = new Uint8Array(ab);\n for (let i = 0; i < byteString.length; i++) {\n ia[i] = byteString.charCodeAt(i);\n }\n\n const blob = new Blob([ab], { type: mimeString });\n const url = URL.createObjectURL(blob);\n\n \/\/ Crea un enlace de descarga\n const link = document.createElement('a');\n link.href = url;\n link.download = \"imagen_geolocalizada.jpg\";\n document.body.appendChild(link);\n link.click();\n\n \/\/ Limpia el enlace de descarga\n document.body.removeChild(link);\n URL.revokeObjectURL(url);\n\n document.getElementById('status').innerText = \"Geolocalizaci\u00f3n guardada y imagen descargada.\";\n };\n reader.readAsDataURL(imageFile);\n });\n <\/script>\n<\/body>\n<\/html>\n\n","protected":false},"excerpt":{"rendered":"<p>Geolocalizador de Im\u00e1genes Manual Geolocaliza tu imagen Latitud: Longitud: Guardar Geolocalizaci\u00f3n y Descargar<\/p>\n","protected":false},"author":6,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":"","_links_to":"","_links_to_target":""},"class_list":["post-9767","page","type-page","status-publish"],"acf":[],"_links":{"self":[{"href":"https:\/\/agenciaseonetbulb.com\/noticias\/wp-json\/wp\/v2\/pages\/9767","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/agenciaseonetbulb.com\/noticias\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/agenciaseonetbulb.com\/noticias\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/agenciaseonetbulb.com\/noticias\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/agenciaseonetbulb.com\/noticias\/wp-json\/wp\/v2\/comments?post=9767"}],"version-history":[{"count":17,"href":"https:\/\/agenciaseonetbulb.com\/noticias\/wp-json\/wp\/v2\/pages\/9767\/revisions"}],"predecessor-version":[{"id":10144,"href":"https:\/\/agenciaseonetbulb.com\/noticias\/wp-json\/wp\/v2\/pages\/9767\/revisions\/10144"}],"wp:attachment":[{"href":"https:\/\/agenciaseonetbulb.com\/noticias\/wp-json\/wp\/v2\/media?parent=9767"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":9767,"date":"2024-09-27T08:24:26","date_gmt":"2024-09-27T07:24:26","guid":{"rendered":"https:\/\/agenciaseonetbulb.com\/noticias\/?page_id=9767"},"modified":"2024-10-02T08:30:16","modified_gmt":"2024-10-02T07:30:16","slug":"herramienta-para-geolocalizar-imagenes","status":"publish","type":"page","link":"https:\/\/agenciaseonetbulb.com\/noticias\/herramienta-para-geolocalizar-imagenes\/","title":{"rendered":"Herramienta para Geolocalizar Im\u00e1genes"},"content":{"rendered":"\n\n\n\n \n \n Geolocalizador de Im\u00e1genes Manual<\/title>\n\n \n <link rel=\"stylesheet\" href=\"https:\/\/unpkg.com\/leaflet\/dist\/leaflet.css\" \/>\n \n <script src=\"https:\/\/unpkg.com\/leaflet\/dist\/leaflet.js\"><\/script>\n \n <script src=\"https:\/\/cdn.rawgit.com\/exif-js\/exif-js\/master\/exif.js\"><\/script>\n \n <script src=\"https:\/\/unpkg.com\/piexifjs\"><\/script>\n\n <style>\n #map {\n height: 400px;\n width: 100%;\n cursor: crosshair; \/* Cambiar el cursor a un puntero de cruz *\/\n }\n .coordinates {\n display: flex;\n justify-content: space-around;\n margin-top: 20px;\n }\n .coordinates input {\n width: 45%;\n }\n <\/style>\n<\/head>\n<body>\n <center><h2>Geolocaliza tu imagen<\/h2><\/center>\n\n \n <div id=\"map\"><\/div><br \/>\n\n \n <div class=\"coordinates\">\n <label for=\"latitudeInput\">Latitud:\n <input type=\"text\" id=\"latitudeInput\" placeholder=\"Introduce latitud\" \/>\n <\/label>\n\n <label for=\"longitudeInput\">Longitud:\n <input type=\"text\" id=\"longitudeInput\" placeholder=\"Introduce longitud\" \/>\n <\/label>\n <\/div>\n\n <br \/>\n \n <input type=\"file\" id=\"imageInput\" accept=\"image\/*\" \/><br \/><br \/>\n\n \n <button id=\"saveLocationBtn\">Guardar Geolocalizaci\u00f3n y Descargar<\/button>\n\n <p id=\"status\"><\/p>\n\n <script>\n \/\/ Inicializamos variables para las coordenadas seleccionadas y el archivo de imagen\n let selectedLatLng = null;\n let imageFile = null;\n\n \/\/ Inicializa el mapa con Leaflet y OpenStreetMap\n const map = L.map('map').setView([40.416775, -3.703790], 5); \/\/ Madrid como vista inicial\n\n L.tileLayer('https:\/\/{s}.tile.openstreetmap.org\/{z}\/{x}\/{y}.png', {\n attribution: '\u00a9 OpenStreetMap contributors'\n }).addTo(map);\n\n \/\/ Al hacer clic en el mapa, actualizar los campos de latitud y longitud sin alerta\n map.on('click', function (e) {\n selectedLatLng = e.latlng;\n document.getElementById('latitudeInput').value = selectedLatLng.lat;\n document.getElementById('longitudeInput').value = selectedLatLng.lng;\n });\n\n \/\/ Carga la imagen seleccionada\n document.getElementById('imageInput').addEventListener('change', function (e) {\n imageFile = e.target.files[0];\n });\n\n \/\/ Funci\u00f3n para guardar las coordenadas en los metadatos EXIF de la imagen y descargarla\n document.getElementById('saveLocationBtn').addEventListener('click', function () {\n const latInput = document.getElementById('latitudeInput').value;\n const lngInput = document.getElementById('longitudeInput').value;\n\n if (!latInput || !lngInput || !imageFile) {\n alert(\"Por favor, introduce latitud y longitud y carga una imagen.\");\n return;\n }\n\n const lat = parseFloat(latInput);\n const lng = parseFloat(lngInput);\n\n const reader = new FileReader();\n reader.onload = function (event) {\n const base64Image = event.target.result;\n const exifObj = piexif.load(base64Image);\n\n \/\/ Prepara los datos de GPS\n const gpsData = {\n GPSLatitude: [[Math.abs(lat), 1], [0, 1], [0, 1]],\n GPSLatitudeRef: lat >= 0 ? 'N' : 'S',\n GPSLongitude: [[Math.abs(lng), 1], [0, 1], [0, 1]],\n GPSLongitudeRef: lng >= 0 ? 'E' : 'W'\n };\n\n \/\/ Inserta los datos de GPS en los metadatos EXIF\n exifObj['GPS'] = gpsData;\n\n \/\/ Inserta los nuevos datos en la imagen\n const newExif = piexif.dump(exifObj);\n const newImage = piexif.insert(newExif, base64Image);\n\n \/\/ Convertir base64 a Blob para poder descargarlo como archivo\n const byteString = atob(newImage.split(',')[1]);\n const mimeString = newImage.split(',')[0].split(':')[1].split(';')[0];\n const ab = new ArrayBuffer(byteString.length);\n const ia = new Uint8Array(ab);\n for (let i = 0; i < byteString.length; i++) {\n ia[i] = byteString.charCodeAt(i);\n }\n\n const blob = new Blob([ab], { type: mimeString });\n const url = URL.createObjectURL(blob);\n\n \/\/ Crea un enlace de descarga\n const link = document.createElement('a');\n link.href = url;\n link.download = \"imagen_geolocalizada.jpg\";\n document.body.appendChild(link);\n link.click();\n\n \/\/ Limpia el enlace de descarga\n document.body.removeChild(link);\n URL.revokeObjectURL(url);\n\n document.getElementById('status').innerText = \"Geolocalizaci\u00f3n guardada y imagen descargada.\";\n };\n reader.readAsDataURL(imageFile);\n });\n <\/script>\n<\/body>\n<\/html>\n\n","protected":false},"excerpt":{"rendered":"<p>Geolocalizador de Im\u00e1genes Manual Geolocaliza tu imagen Latitud: Longitud: Guardar Geolocalizaci\u00f3n y Descargar<\/p>\n","protected":false},"author":6,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":"","_links_to":"","_links_to_target":""},"class_list":["post-9767","page","type-page","status-publish"],"acf":[],"_links":{"self":[{"href":"https:\/\/agenciaseonetbulb.com\/noticias\/wp-json\/wp\/v2\/pages\/9767","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/agenciaseonetbulb.com\/noticias\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/agenciaseonetbulb.com\/noticias\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/agenciaseonetbulb.com\/noticias\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/agenciaseonetbulb.com\/noticias\/wp-json\/wp\/v2\/comments?post=9767"}],"version-history":[{"count":17,"href":"https:\/\/agenciaseonetbulb.com\/noticias\/wp-json\/wp\/v2\/pages\/9767\/revisions"}],"predecessor-version":[{"id":10144,"href":"https:\/\/agenciaseonetbulb.com\/noticias\/wp-json\/wp\/v2\/pages\/9767\/revisions\/10144"}],"wp:attachment":[{"href":"https:\/\/agenciaseonetbulb.com\/noticias\/wp-json\/wp\/v2\/media?parent=9767"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}