Vue中使用android和ios手机打开相机并选择相册功能和图片旋转问题
<template>
<div>
<input type="file" id="fileElem" accept="image/*" @change="chooseImg" ref="imgFile"/>
//使用的vant插件
<van-action-sheet v-model="showCameraSelect" :actions="actions" :cancel-text="\'取消\'" @cancel="showCameraSelect=false" />
</div>
</template>
<script>
//cnpm下载exif-js
import EXIF from "exif-js";
export default {
data() {
return {
actions:[],
showCameraSelect: false
}
},
created() {
this.actions = [{
name: \'相机拍摄\',
model: \'camera\'
},
{
name: \'选择图片\',
model: \'select\'
}
];
},
mounted() {
//判断数组中是否包含某字符串
Array.prototype.contains = function (needle) {
for (i in this) {
if (this[i].indexOf(needle) > 0)
return i;
}
return -1;
}
var device_type = navigator.userAgent; //获取userAgent信息
var md = new MobileDetect(device_type); //初始化mobile-detect
var os = md.os(); //获取系统
var model = "";
if (os == "iOS") { //ios系统的处理
this.$refs.imgFile.removeAttribute("capture");
}else{
let brand = this.phoneBrand()
if ( brand === \'xiaomi\') { // 华为、小米手机：相册选择、拍摄
this.$refs.imgFile.setAttribute("accept","image/*");
}else{
this.$refs.imgFile.setAttribute("capture","user");
}
}
},
methods: {
// 获取手机品牌
phoneBrand() {
let sUserAgent = navigator.userAgent.toLowerCase()
let isIphone = sUserAgent.match(/iphone/i) == "iphone";
let isHuawei = sUserAgent.match(/huawei/i) == "huawei";
let isHonor = sUserAgent.match(/honor/i) == "honor";
let isOppo = sUserAgent.match(/oppo/i) == "oppo";
let isOppoR15 = sUserAgent.match(/pacm00/i) == "pacm00";
let isVivo = sUserAgent.match(/vivo/i) == "vivo";
let isXiaomi = sUserAgent.match(/mi\s/i) == "mi ";
let isXiaomi2s = sUserAgent.match(/mix\s/i) == "mix ";
let isRedmi = sUserAgent.match(/redmi/i) == "redmi";
let isSamsung = sUserAgent.match(/sm-/i) == "sm-";
if (isIphone) {
return \'iphone\';
} else if (isHuawei || isHonor) {
return \'huawei\';
} else if (isOppo || isOppoR15) {
return \'oppo\';
} else if (isVivo) {
return \'vivo\';
} else if (isXiaomi || isRedmi || isXiaomi2s) {
return \'xiaomi\';
} else if (isSamsung) {
return \'samsung\';
} else {
return \'default\';
}
}
// 触发拍摄
shootStart() {
setTimeout(()=>{
let fileElem = document.getElementById("fileElem");
let brand = this.phoneBrand()
if ( brand === \'xiaomi\' || brand === \'huawei\') { // 华为、小米手机：相册选择、拍摄
this.$dialog.confirm({
message: \'如果您的手机不支持拍摄上传照片，请从本地相册上传\',
showCancelButton: false,
confirmButtonText:\'确定\'
}).then(() => {
// fileElem.removeAttribute(\'capture\');
this.$nextTick(()=>{
//触发点击事件
let event = document.createEvent("MouseEvents");
event.initEvent("click", true, true);
document.getElementById("fileElem").dispatchEvent(event);
})
})
}else { // 非小米：前置摄像头拍摄
this.$nextTick(()=>{
let event = document.createEvent("MouseEvents");
event.initEvent("click", true, true);
document.getElementById("fileElem").dispatchEvent(event);
})
}
}, 100)
},
//选择图片/拍摄照片
chooseImg(e) {
let files = e.target.files || e.dataTransfer.files;
if (!files.length) return;
this.imgPreview(files[0]);
},
// 预览图片
imgPreview(file, isRepeat) {
let that = this;
if (file) {
let Orientation;
EXIF.getData(file, function() {
EXIF.getAllTags(this);
Orientation = EXIF.getTag(this, \'Orientation\');
let reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function(ev) {
const quality = 0.95; //图像质量
let image = new Image();
let canvas = document.createElement(\'canvas\'),
ctx = canvas.getContext(\'2d\');
/* 旋转绘制 */
let rotateImage = function(img, dir, canvas, s) {
dir = dir || \'right\';
s = s || 1;
let MIN_STEP = 0,
MAX_STEP = 3,
width = canvas.width || img.width,
height = canvas.height || img.height,
step = 0;
if (dir === \'right\') {
step += s;
step > MAX_STEP && (step = MIN_STEP);
} else {
step -= s;
step < MIN_STEP && (step = MAX_STEP);
}
let degree = step * 90 * Math.PI / 180;
switch (step) {
case 1:
canvas.width = height;
canvas.height = width;
ctx.rotate(degree);
ctx.drawImage(img, 0, -height, width, height);
break;
case 2:
canvas.width = width;
canvas.height = height;
ctx.rotate(degree);
ctx.drawImage(img, -width, -height, width, height);
break;
case 3:
canvas.width = height;
canvas.height = width;
ctx.rotate(degree);
ctx.drawImage(img, -width, 0, width, height);
break;
default:
canvas.width = width;
canvas.height = height;
ctx.drawImage(img, 0, 0, width, height);
break;
}
};
/* 绘制 */
let draw = function() {
/* 图片原始大小 */
let width = image.width,
height = image.height;
/* 图片尺寸缩放比 800 为基数 */
if (width > 3200 || height > 3200) {
width = Math.floor(width / 4);
height = Math.floor(height / 4);
} else if (width > 2400 || height > 2400) {
width = Math.floor(width / 3);
height = Math.floor(height / 3);
} else if (width > 1600 || height > 1600) {
width = Math.floor(width / 2);
height = Math.floor(height / 2);
}
canvas.width = width;
canvas.height = height;
/*canvas清屏*/
ctx.clearRect(0, 0, canvas.width, canvas.height);
if (Orientation && Orientation !== 1) {
switch (Orientation) {
case 6:
/* 顺时针旋转90度 */
rotateImage(image, \'right\', canvas);
break;
case 8:
/* 逆时针旋转90度 */
rotateImage(image, \'left\', canvas);
break;
case 3:
/* 顺时针旋转180度 */
rotateImage(image, \'right\', canvas, 2);
break;
default:
break;
}
}else {
ctx.drawImage(image, 0, 0, width, height);
}
//第一个参数为图片类型,如image/jpeg, image/png, image/gif;第二个参数为图片质量(针对image/jpeg、image/webp)
let dataURI = canvas.toDataURL("image/jpeg", quality);
that.validSize(file.name, dataURI);
};
/* 图像加载完成 */
image.onload = function() {
draw();
}
image.src = ev.target.result
}
});
}
},
}
}
</script>
<style scoped>
</style>
以上是 Vue中使用android和ios手机打开相机并选择相册功能和图片旋转问题 的全部内容， 来源链接： utcz.com/z/375868.html
