关于uniapp使用izExif.js 插件问题

小白学过的代码

于 2024-08-17 16:09:11 发布

阅读量443

点赞数 5

分类专栏： uniapp 文章标签： uni-app

本文链接：https://blog.csdn.net/weixin_42539678/article/details/141281994

版权

uniapp 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

需求：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 = -1
	let lon2 = 0
	let lat2 = 0
	let 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);
}