vue +vant 适合手机端上传图片图片适合手机端上传图片图片 实现了上传、压缩、旋转实现了上传、压缩、旋转
图片图片
html界面界面
JS部分部分
部分手机拍照时,正面拍照照片会旋转
解决问题:使用exif.js来获取图像数据,然后进行处理 **
1. 安装依赖
npm install exif-js --save
2. 获取图像数据 EXIF.getData();
获取某个数据方向参数 EXIF.getTag(this, 'Orientation');
js完整代码如下,直接拷贝使用
mport Exif from 'exif-js';
data() {
return {
files: {
name: "",
type: ""
},
headerImage: null,
picValue: null,
upImgUrl:'',
fileList:[],
}
},
// 组件方法 获取 流
async onRead(file) {
// console.log(file);
// console.log(file.file);
this.files.name = file.file.name; // 获取文件名
this.files.type = file.file.type; // 获取类型
this.picValue = file.file; // 文件流
this.imgPreview(this.picValue);
},
// 处理图片
imgPreview(file) {
let self = this;
let Orientation;
//去获取拍照时的信息,解决拍出来的照片旋转问题
Exif.getData(file, function () {
Orientation = Exif.getTag(this, "Orientation");
});
// 看支持不支持FileReader
if (!file || !window.FileReader) return;
if (/^image/.test(file.type)) {
// 创建一个reader
let reader = new FileReader();
// 将图片2将转成 base64 格式
reader.readAsDataURL(file);
// 读取成功后的回调
reader.onloadend = function () {
// console.log(this.result);
let result = this.result;
let img = new Image();
img.src = result;
评论5