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

news/2024/12/22 9:51:46/

需求: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);
}


http://www.ppmy.cn/news/1514000.html

相关文章

多个pdf怎么合并成一个pdf?介绍10个pdf合并成一个pdf免费版软件(近期更新)

您是否创建了多个pdf文件&#xff0c;正打算将它们合并在一起&#xff1f;想知道如何在电脑上将多个pdf合并成一个文件&#xff0c;又不想花费太多钱&#xff1f;那么您一定不要错过本篇文章&#xff01;在本文中&#xff0c;我们为您整理了10个pdf合并成一个pdf免费版软件&…

计算机网络之TCP序号,确认序号和报文传输时间

开篇提示 本篇适合于了解基础知识&#xff0c;进行扩展提高的使用&#xff0c;附带考研习题以及解析。 TCP序号和确认序号的区别 TCP首部中有序号和确认序号&#xff0c;他们都是4个字节&#xff08;4B&#xff09;&#xff0c;且在数据传输中有很重要的意义&#xff0c;那么两…

探索paho-mqtt:Python世界的物联网通信桥梁

文章目录 **探索paho-mqtt&#xff1a;Python世界的物联网通信桥梁**第一部分&#xff1a;背景介绍第二部分&#xff1a;paho-mqtt概览第三部分&#xff1a;安装指南第四部分&#xff1a;基础函数使用第五部分&#xff1a;实际应用场景第六部分&#xff1a;常见问题与解决方案第…

切换从 HTTP/1.1 到 HTTP/2

切换从 HTTP/1.1 到 HTTP/2 是一个显著的升级&#xff0c;能够带来更好的性能和效率。以下是切换过程中需要考虑和执行的步骤&#xff1a; 1. 服务器支持 确认服务器支持 HTTP/2&#xff1a;首先要确认你的 Web 服务器支持 HTTP/2。大多数现代服务器如 Nginx、Apache、IIS、C…

2024年 Selenium 自动化高频面试题及答案整理

selenium中&#xff0c;有哪些不同定位元素方法&#xff1f; •常用的八大定位方式&#xff1a;id、name、class、xpath、CSS selector、link_text、partial_link、tag •高级定位方式&#xff1a;JavaScript、jQuery 你最常用哪种定位方式&#xff0c;为什么&#xff1f; …

论如何划分各类系统的网络安全风险等级

网络安全风险等级的划分&#xff0c;对于保护系统的稳定运行和敏感信息的安全具有重大意义。而等级保护&#xff08;等保&#xff09;为我们提供了一个科学、规范的框架来划分各类系统的网络安全风险等级。 等级保护依据系统的重要程度和受到破坏后的影响程度&#xff0c;将系统…

二十二、状态模式

文章目录 1 基本介绍2 案例2.1 Season 接口2.2 Spring 类2.3 Summer 类2.4 Autumn 类2.5 Winter 类2.6 Person 类2.7 Client 类2.8 Client 类的运行结果2.9 总结 3 各角色之间的关系3.1 角色3.1.1 State ( 状态 )3.1.2 ConcreteState ( 具体的状态 )3.1.3 Context ( 上下文 )3.…

深入解析SSE如何保持连接:原理与实战技巧

&#x1f49d;&#x1f49d;&#x1f49d;欢迎莅临我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐&#xff1a;「storm…