<input
type="file"
accept="image/*"
@change="select">
iOS下會(huì)喚起選擇照片或者拍照面板
Android直接進(jìn)入選擇照片,添加capture="camera"后直接喚起拍照
所以Android需要自己實(shí)現(xiàn)一個(gè)拍照或者選擇照片面板來(lái)適應(yīng)iOS逗鸣,所以讓APP實(shí)現(xiàn)去吧成榜,整個(gè)統(tǒng)一的UI
select(event) {
// eslint-disable-next-line no-console
console.log('select', event, event.target);
const file = event.target.files[0];
// eslint-disable-next-line no-console
console.log('start', file);
const fileReader = new FileReader();
fileReader.onload = async (e) => {
// eslint-disable-next-line no-console
console.log('filereader.onload', file, file.type, e.target);
const base64Str = e.target.result;
if (!base64Str) {
Toast.show('選擇文件有誤,請(qǐng)重試');
return;
}
const img = new Image();
img.onload = async () => {
try {
// eslint-disable-next-line no-console
console.log('img.onload');
// 獲取橫屏豎屏
const Orientation = await this.getOrientation(img);
let n = 0;
if (Orientation === 6) {
n = 1;
}
// iphone拍照上傳圖片橫屏的問(wèn)題
const canvas = this.rotateAndCompressImg(img, n, 700);
// eslint-disable-next-line no-console
console.log('canvas壓縮旋轉(zhuǎn)后的canvas');
// 導(dǎo)出base64文件
const imgData = canvas.toDataURL('image/jpeg');
// eslint-disable-next-line no-console
console.log('canvas壓縮旋轉(zhuǎn)后的base64', imgData.length);
// 獲取被canvas壓縮后的圖片對(duì)象留拾,從而獲取base64字符串字節(jié)大小
const blob = await Tools.base64ToBlob(imgData.split(',')[1], 'image/png');
// eslint-disable-next-line no-console
console.log('壓縮后的img', blob, blob.size);
// 限制 15M 以內(nèi)
if (blob.size > 1048576 * 15) {
Toast.show('選擇文件太大,請(qǐng)重選');
return;
}
this.uploadImg({
file: imgData.slice(imgData.indexOf(',') + 1),
type: 'image/jpeg'
});
// change事件監(jiān)聽(tīng)的是input的value的改變褐耳,不清空胁孙,就不能選擇同一個(gè)文件
// eslint-disable-next-line no-console
console.log(event.target);
if (event.target && event.target.value) {
event.target.value = '';
}
} catch (err) {
// eslint-disable-next-line no-console
console.log('外層', err);
}
};
img.src = base64Str;
};
fileReader.readAsDataURL(file);
},
getOrientation(img) {
return new Promise(((resolve) => {
EXIF.getData(img, function _cb() {
try {
EXIF.getAllTags(this);
const Orientation = EXIF.getTag(this, 'Orientation');
resolve(Orientation);
} catch (e) {
// eslint-disable-next-line no-console
console.log('getOrientation', e);
// reject(e);
// 即便獲取圖片寬高失敗也不阻止后續(xù)圖片上傳顯示,只是不能旋轉(zhuǎn)
resolve(0);
}
});
}));
},
rotateAndCompressImg(img, n, maxWidth = 700) {
const canvas = document.createElement('canvas');
const anw = document.createAttribute('width');
const anh = document.createAttribute('height');
let w;
let h;
const isLandscape = n % 2 !== 0;
// eslint-disable-next-line no-console
console.log('img原始寬高', img.width, img.height);
if (isLandscape) {
w = img.height;
h = img.width;
} else {
w = img.width;
h = img.height;
}
if (w > maxWidth) {
h *= (maxWidth / w);
w = maxWidth;
}
anw.nodeValue = w;
anh.nodeValue = h;
canvas.setAttributeNode(anw);
canvas.setAttributeNode(anh);
const ctx = canvas.getContext('2d');
ctx.translate(w / 2, h / 2);
ctx.rotate(n * 0.5 * Math.PI);
ctx.drawImage(img, -w / 2, -h / 2, w, h);
return canvas;
},
async uploadImg({ file, type }) {
// eslint-disable-next-line no-console
console.log('uploadImg');
Indicator.open({
text: '圖片上傳中...',
});
try {
const { url: src } = await recruitApi.uploadImage({
file: file || '',
image: 40,
type: this.getPlatform()
});
Indicator.close();
this.urls.push({
type,
src
});
} catch (error) {
if (error.name === 'CustomError') {
Toast.show(error.response && error.response.data && error.response.data.msg);
return;
}
Toast.show(error.message);
} finally {
Indicator.close();
}
},