js 获取图片经纬度及写经纬度

piexifjs 写入照片头文件_忘川追影的博客-CSDN博客_piexifjs

感谢这位楼主

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>写入图片头文件</title>
</head>
<body>
<input type="file" id="files" />
<button
type="button"
id="btn1"
style="position: absolute; top: 5px; right: 10px"
>
读取图片头文件
</button>
<div id="resized"></div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/exif-js/2.3.0/exif.min.js"></script>
<script src="./piexif.js"></script>
<script>
function handleFileSelect(evt) {
var file = evt.target.files[0];

var zeroth = {};
var exif = {};
var gps = {};
zeroth[piexif.ImageIFD.Make] = 'lyf';

//经纬度写入
var lat = 61.123456789;
var lng = 25.123456789;
gps[piexif.GPSIFD.GPSLatitudeRef] = lat < 0 ? 'S' : 'N';
gps[piexif.GPSIFD.GPSLatitude] = piexif.GPSHelper.degToDmsRational(lat);
gps[piexif.GPSIFD.GPSLongitudeRef] = lng < 0 ? 'W' : 'E';
gps[piexif.GPSIFD.GPSLongitude] = piexif.GPSHelper.degToDmsRational(
lng
);
//方位角写入
gps[piexif.GPSIFD.GPSImgDirection] = [123456, 100];

var exifObj = { '0th': zeroth, Exif: exif, GPS: gps };
var exifStr = piexif.dump(exifObj);

var reader = new FileReader();
reader.onload = function (e) {
var inserted = piexif.insert(exifStr, e.target.result);

var image = new Image();
image.src = inserted;
image.width = 200;
image.id = 'img1';
var el = $('<div></div>').append(image);
$('#resized').prepend(el);
};
reader.readAsDataURL(file);
}

document
.getElementById('files')
.addEventListener('change', handleFileSelect, false);

document.getElementById('btn1').onclick = function () {
EXIF.getData(document.getElementById('img1'), function () {
const allMetaData = EXIF.getAllTags(this);

let direction;
if (allMetaData.GPSImgDirection) {
const directionArry = allMetaData.GPSImgDirection; // 方位角
direction = directionArry.numerator / directionArry.denominator;
}

// 经度 numerator(数值) denominator（自身的进制）三个参数度、分、秒换算，保留小数点后两位
let Longitude;
if (allMetaData.GPSLongitude) {
const LongitudeArry = allMetaData.GPSLongitude;
const longLongitude =
LongitudeArry[0].numerator / LongitudeArry[0].denominator +
LongitudeArry[1].numerator / LongitudeArry[1].denominator / 60 +
LongitudeArry[2].numerator / LongitudeArry[2].denominator / 3600;
Longitude = longLongitude.toFixed(8);
}

// 纬度 numerator(数值) denominator（自身的进制）三个参数度、分、秒换算，保留小数点后两位
let Latitude;
if (allMetaData.GPSLatitude) {
const LatitudeArry = allMetaData.GPSLatitude;
const longLatitude =
LatitudeArry[0].numerator / LatitudeArry[0].denominator +
LatitudeArry[1].numerator / LatitudeArry[1].denominator / 60 +
LatitudeArry[2].numerator / LatitudeArry[2].denominator / 3600;
Latitude = longLatitude.toFixed(8);
}

let originalTime;
if (allMetaData.DateTimeOriginal) {
originalTime = allMetaData.DateTimeOriginal; // 时间
}

console.log('照片EXIF信息', allMetaData);
console.log('经度,纬度,方位角', Longitude, Latitude, direction);
});
};
</script>
</body>
</html>

下面才是我的代码，红色字体获取图片经纬度、拍摄日期

layui.upload.render({

elem: op.elem,

url : basePath + '/admin/home/uploadFilesB2Info.do',

accept: 'images',

acceptMime: 'image/*',

multiple: true,

auto: false,

bindAction: op.bindAction,

before: function(obj){

choose: function(obj){

//读取本地文件

obj.preview(function(index, file, result){

//获取照片EXIF信息

EXIF.getData(file, function () {

const allMetaData = EXIF.getAllTags(this);

let direction;

if (allMetaData.GPSImgDirection) {

const directionArry = allMetaData.GPSImgDirection; // 方位角

direction = directionArry.numerator / directionArry.denominator;

}

// 经度 numerator(数值) denominator（自身的进制）三个参数度、分、秒换算，保留小数点后两位

let Longitude;

if (allMetaData.GPSLongitude) {

const LongitudeArry = allMetaData.GPSLongitude;

const longLongitude =

LongitudeArry[0].numerator / LongitudeArry[0].denominator +

LongitudeArry[1].numerator / LongitudeArry[1].denominator / 60 +

LongitudeArry[2].numerator / LongitudeArry[2].denominator / 3600;

Longitude = longLongitude.toFixed(8);

}

// 纬度 numerator(数值) denominator（自身的进制）三个参数度、分、秒换算，保留小数点后两位

let Latitude;

if (allMetaData.GPSLatitude) {

const LatitudeArry = allMetaData.GPSLatitude;

const longLatitude =

LatitudeArry[0].numerator / LatitudeArry[0].denominator +

LatitudeArry[1].numerator / LatitudeArry[1].denominator / 60 +

LatitudeArry[2].numerator / LatitudeArry[2].denominator / 3600;

Latitude = longLatitude.toFixed(8);

}

let originalTime;

if (allMetaData.DateTimeOriginal) {

originalTime = allMetaData.DateTimeOriginal; // 时间

}

console.log('照片EXIF信息', allMetaData);

console.log('经度,纬度,方位角', Longitude, Latitude, direction);

console.log('拍摄日期', originalTime);

});

done: function(res, index, upload){

error: function(index, upload){

}

});

imgUpload({

elem: '#qtImgUpload',

bindAction: '#qtImgUploadAction',

listview: "#galleryImgList",

table:'tableOther',

file_desc: '其它',

callbackfun: function(){

}

});

js 获取图片经纬度及写经纬度相关推荐

js 获取图片url的Blob值并预览
js 获取图片url的Blob值并预览 1)使用 XMLHttpRequest 对象获取图片url的Blob值参考:https://www.cnblogs.com/tujia/p/6483255.h ...
js获取图片真实尺寸 - 代码篇
js获取图片真实尺寸 - 代码篇代码案例: <!DOCTYPE html> <html> <head> <meta charset="UTF-8& ...
php根据图片地址获取图片原始高宽,Js获取图片原始宽高的实现代码
如果我们页面看到的图片都是缩略图,那就需要做个图片点击放大效果,那么怎样获取图片的原始宽高呢?方法如下: //获取图片原始宽度 function getNaturalWidthAndHeight(im ...
js获取图片点坐标值
js获取图片点坐标值 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:// ...
js点击获取—通过JS获取图片的相对坐标位置
一.通过JS获取鼠标点击时图片的相对坐标位置源代码如下所示: 1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <h ...
JS获取图片的EXIF信息+纠正图片方向
前端图片处理碰到的一个离奇 bug , 关于图片的 EXIF 信息,特地记录下来 . 然后使用一下代码可以获取Orientation信息,并纠正Orientation带来的图片旋转问题 // from ...
Js获取图片主色调，近似色，互补色，以及根据图片颜色获取主题配色方案详解、插件。
Js获取图片主色调,近似色,互补色,以及根据图片颜色获取主题配色方案详解.插件. **应用场景:**在很多时候,前端开发过程中需要动态的获取图片的主要的颜色值,并根据主色调去调整主题样式的颜色或者模拟 ...
php 获得图片大小,js获取图片大小_php 或js获取图片大小
摘要腾兴网为您分享:php 或js获取图片大小,之了课堂,云集,宜信,学堂在线等软件知识,以及手机东方财富通,航空证券软件,日历星座,大吉大利晚上吃鸡图片,一米鲜,熊猫云,sketchup动画,空文 ...
前端js获取图片大小扩展名_前端 JS 获取 Image 图像宽高尺寸
前端 JS 获取 Image 图像宽高尺寸简介项目中用到获取图片的原始尺寸,然后适配宽高:网上的大部分前端解决方案,都是new Image()后,在onload事件中获取image的尺寸. 在 ...

js 获取图片经纬度及写经纬度

js 获取图片经纬度及写经纬度相关推荐

最新文章

热门文章