需求:1.APP获取图片的属性,得到经纬度信息,然后标注到图片上
我们采用izExif.js 插件,进行获取图片信息,在模拟器测试好好地,但是使用真机测试发现getImageData没有返回信息,去izExif.js源码查找
var fileReader = new plus.io.FileReader()
发现FileReader
对象返回的值都null,导致
fileReader.onload = function(data) {var arrayBuffer = base64ToArrayBuffer(data.target.result);handleBinaryFile(arrayBuffer)}
这个代码无法获取文件信息于是我打印它的报错信息发现它的提示:
"targetSdkVersion设置>=29后在Android10+系统设备不支持当前路径。请更改为应用运行路径!具体请看:https://ask.dcloud.net.cn/article/36199"
查看官方文档,
简单的说:就是说你的文件路径是系统根路径读取不到文件,需要将文件存到沙盒文件才行。
但是又不能直接用,但是你又不能设置uni.chooseImage,压缩类型为compressed ,因为izExif不支持读取压缩后图片信息。只能曲线救国读取图片,然后再存到系统里,获取沙盒文件地址,然后读取文件信息,在压缩上传到后端
import {getImageData,getFloatLocationByExif,
} from './izExif.js'// 选择图片
const clickChooseImg = function(font, url, num, lon1, lat1) {let distance = -1let lon2 = 0let lat2 = 0let address = ''let tempFilePath = ''uni.chooseImage({count: num,sizeType: ['original'],success: async (res) => {try {uni.showLoading({title: '加载中'});tempFilePath = res.tempFilePaths[0]// 保存文件到本地const filePath = await saveFile(res.tempFilePaths[0]);// 判断是否是 JPEG 格式并处理图片数据let lon2, lat2, address, distance;if (isJPEG(filePath)) {const imageData = await getImageData(filePath);if (isValidExif(imageData)) {({lon: lon2,lat: lat2,address,distance} = await processImageExif(imageData, lon1, lat1));}// 压缩图片tempFilePath = await compressImage(filePath);}// 上传图片await uploadImage(tempFilePath, url, lon2 || 0, lat2 || 0, address || "", distance ||0, font);} catch (error) {console.error('处理失败:', error);uni.showToast({title: '处理失败,请重试',icon: 'none',duration: 2000});} finally {uni.hideLoading();}}});
}
// 保存文件函数
async function saveFile(tempFilePath) {return new Promise((resolve, reject) => {uni.saveFile({tempFilePath,success: (res) => resolve(res.savedFilePath),fail: reject});});
}
// 检查EXIF数据的有效性
function isValidExif(imageData) {return imageData && imageData.exif && Object.keys(imageData.exif).length > 0;
}
// 处理EXIF数据获取经纬度及地址信息
async function processImageExif(imageData, lon1, lat1) {const {lon,lat} = getFloatLocationByExif(imageData.exif);if (lon !== 0 && lat !== 0) {const [lon3, lat3] = wgs84togcj02(lon, lat);const address = await getAddressFromLocation(lon3, lat3);const distance = haversine(lon1, lat1, lon, lat);return {lon,lat,address,distance};}return {};
}
// 获取地址信息
async function getAddressFromLocation(lon, lat) {const geocodeRes = await new Promise((resolve, reject) => {uni.request({method: 'GET',url: 'https://restapi.amap.com/v3/geocode/regeo',data: {key: '',location: `${lon.toFixed(5)},${lat.toFixed(5)}`,output: 'JSON'},success: resolve,fail: reject});});if (geocodeRes.data.status == 1) {return geocodeRes.data.regeocode.formatted_address;}return null;
}
// 压缩图片函数
async function compressImage(filePath) {return new Promise((resolve, reject) => {uni.compressImage({src: filePath,quality: 100,success: (res) => resolve(res.tempFilePath),fail: reject});});
}
// 上传图片函数
async function uploadImage(tempFilePath, url, lon, lat, address, distance, font) {const uploadFileRes = await new Promise((resolve, reject) => {uni.uploadFile({url: host.url + url,filePath: tempFilePath,name: 'file',fileType: "image",formData: {lon,lat,address},success: resolve,fail: reject});});const parsedData = JSON.parse(uploadFileRes.data);if (parsedData.code == 0) {font(parsedData.data.src, distance);} else {throw new Error(parsedData.msg);}
}/*** WGS84转GCj02* @param lng* @param lat* @returns {*[]}*/
var wgs84togcj02 = function wgs84togcj02(lng, lat) {var lat = +lat;var lng = +lng;if (out_of_china(lng, lat)) {return [lng, lat]} else {var dlat = transformlat(lng - 105.0, lat - 35.0);var dlng = transformlng(lng - 105.0, lat - 35.0);var radlat = lat / 180.0 * PI;var magic = Math.sin(radlat);magic = 1 - ee * magic * magic;var sqrtmagic = Math.sqrt(magic);dlat = (dlat * 180.0) / ((a * (1 - ee)) / (magic * sqrtmagic) * PI);dlng = (dlng * 180.0) / (a / sqrtmagic * Math.cos(radlat) * PI);var mglat = lat + dlat;var mglng = lng + dlng;return [mglng, mglat]}
};/*** GCJ02 转换为 WGS84* @param lng* @param lat* @returns {*[]}*/
var x_PI = 3.14159265358979324 * 3000.0 / 180.0;
var PI = 3.1415926535897932384626;
var a = 6378245.0;
var ee = 0.00669342162296594323;
const gcj02towgs84 = function gcj02towgs84(lng, lat) {var lat = +lat;var lng = +lng;if (out_of_china(lng, lat)) {return [lng, lat]} else {var dlat = transformlat(lng - 105.0, lat - 35.0);var dlng = transformlng(lng - 105.0, lat - 35.0);var radlat = lat / 180.0 * PI;var magic = Math.sin(radlat);magic = 1 - ee * magic * magic;var sqrtmagic = Math.sqrt(magic);dlat = (dlat * 180.0) / ((a * (1 - ee)) / (magic * sqrtmagic) * PI);dlng = (dlng * 180.0) / (a / sqrtmagic * Math.cos(radlat) * PI);var mglat = lat + dlat;var mglng = lng + dlng;return [lng * 2 - mglng, lat * 2 - mglat]}
};var transformlat = function transformlat(lng, lat) {var lat = +lat;var lng = +lng;var ret = -100.0 + 2.0 * lng + 3.0 * lat + 0.2 * lat * lat + 0.1 * lng * lat + 0.2 * Math.sqrt(Math.abs(lng));ret += (20.0 * Math.sin(6.0 * lng * PI) + 20.0 * Math.sin(2.0 * lng * PI)) * 2.0 / 3.0;ret += (20.0 * Math.sin(lat * PI) + 40.0 * Math.sin(lat / 3.0 * PI)) * 2.0 / 3.0;ret += (160.0 * Math.sin(lat / 12.0 * PI) + 320 * Math.sin(lat * PI / 30.0)) * 2.0 / 3.0;return ret
};var transformlng = function transformlng(lng, lat) {var lat = +lat;var lng = +lng;var ret = 300.0 + lng + 2.0 * lat + 0.1 * lng * lng + 0.1 * lng * lat + 0.1 * Math.sqrt(Math.abs(lng));ret += (20.0 * Math.sin(6.0 * lng * PI) + 20.0 * Math.sin(2.0 * lng * PI)) * 2.0 / 3.0;ret += (20.0 * Math.sin(lng * PI) + 40.0 * Math.sin(lng / 3.0 * PI)) * 2.0 / 3.0;ret += (150.0 * Math.sin(lng / 12.0 * PI) + 300.0 * Math.sin(lng / 30.0 * PI)) * 2.0 / 3.0;return ret
};/*** 判断是否在国内,不在国内则不做偏移* @param lng* @param lat* @returns {boolean}*/
var out_of_china = function out_of_china(lng, lat) {var lat = +lat;var lng = +lng;// 纬度3.86~53.55,经度73.66~135.05 return !(lng > 73.66 && lng < 135.05 && lat > 3.86 && lat < 53.55);
};function isJPEG(filePath) {return filePath.toLowerCase().endsWith('.jpg') || filePath.toLowerCase().endsWith('.jpeg');
}function haversine(lon1, lat1, lon2, lat2) {// 转换为弧度lon1 = radians(lon1);lat1 = radians(lat1);lon2 = radians(lon2);lat2 = radians(lat2);// 计算经度和纬度的差值const dlon = lon2 - lon1;const dlat = lat2 - lat1;// Haversine 公式const a = Math.sin(dlat / 2) ** 2 + Math.cos(lat1) * Math.cos(lat2) * Math.sin(dlon / 2) ** 2;const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));// 地球半径(千米)const R = 6371;// 计算距离return R * c;
}function radians(degrees) {return degrees * (Math.PI / 180);
}