<template>
<div class="photo-page">
<!-- <img v-if='imgUrl' :src="imgUrl" alt=""> -->
<!-- <img v-if='imgUrl' :src="imgUrl" alt=""> -->
<template v-if="isAli">
<!-- 支付宝 -->
<div class="ali-p" @click="up">
<slot></slot>
</div>
<!-- 微信 -->
<!-- <div v-if="isWx">
<button type="button" @click="wxUp">图片上传</button>
</div>-->
</template>
<div class="h5-p" v-else>
<!-- <h2>H5拍照</h2> -->
<input
type="file"
accept="image/*"
:id="id"
:ref='id'
style="display:none"
@change="fileChange"
capture="user"
value="上传"
>
<label class="change-label" :for="id">
<slot></slot>
</label>
</div>
</div>
</template>
<script>
import { isWxAli } from "@/common/common";
// import Exif from '@/common/exif'
import axios from "axios";
import { baseUrl } from "../../config/index";
import EXIF from "exif-js";
export default {
props: {
idStr: {
//用于保证input中id的唯一性,防止 Math.random()产生重复的值
type: String | Number,
default: ""
}
},
data() {
return {
isWx: false,
isAli: false,
qulity: 1,
imgUrl: "",
faceUrl: "",
Orientation: null,
id:
"change_" +
Math.random()
.toString(16)
.slice(-6) +
this.idStr
};
},
mountd() {
// console.log(Exif,this.Exif);
},
created() {
let env = isWxAli();
this.isWx = env.isWx;
this.isAli = env.isAliPay;
},
mounted() {
},
methods: {
rotateImg(img, direction, canvas) {
//最小与最大旋转方向,图片旋转4次后回到原方向
const min_step = 0;
const max_step = 3;
if (img == null) return;
//img的高度和宽度不能在img元素隐藏后获取,否则会出错
let height = img.height
let width = img.width
let step = 2;
if (step == null) {
step = min_step;
}
if (direction == "right") {
step++;
//旋转到原位置,即超过最大值
step > max_step && (step = min_step);
} else {
step--;
step < min_step && (step = max_step);
}
//旋转角度以弧度值为参数
let degree = (step * 90 * Math.PI) / 180;
console.log(step)
switch (step) {
case 0:
canvas.width = width;
canvas.height = height;
this.ctx.drawImage(img, 0, 0);
break;
case 1:
canvas.width = height/4;
canvas.height = width/4;
this.ctx.rotate(degree);
this.ctx.drawImage(img, 0, -height/4,width/4,height/4);
break;
case 2:
canvas.width = width;
canvas.height = height;
this.ctx.rotate(degree);
this.ctx.drawImage(img, -width, -height);
break;
case 3:
canvas.width = height/4;
canvas.height = width/4;
this.ctx.rotate(degree);
this.ctx.drawImage(img, -width/4, 0,width/4,height/4);
break;
}
},
getUrlBase64(url) {
let _this = this;
var canvas = document.createElement("canvas"); //创建canvas DOM元素
this.ctx = canvas.getContext("2d");
var img = new Image();
img.crossOrigin = "anonymous";
img.onload = function() {
let u = navigator.userAgent;
console.log(u);
if (!!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)) {
//ios系统
// alert("ios" + _this.Orientation)
// _this.Orientation = 3
if (_this.Orientation&& _this.Orientation != 1) {
console.log("IOS,需要旋转")
switch (_this.Orientation) {
case 6: //需要顺时针(向左)90度旋转
_this.rotateImg(this, "left", canvas);
break;
case 8: //需要逆时针(向右)90度旋转
_this.rotateImg(this, "right", canvas);
break;
case 3: //需要180度旋转
canvas.width = img.width/4;
canvas.height = img.height/4;
_this.ctx.rotate((180 * Math.PI) / 180);
_this.ctx.drawImage(img, -img.width/4, -img.height/4,img.width/4,img.height/4);
break;
}
} else {
//不需要旋转
// alert("是ios但是不需要旋转")
let h = img.height;
let w = img.width;
canvas.height = h / 4; //指定画板的高度,自定义
canvas.width = w / 4; //指定画板的宽度,自定义
_this.ctx.drawImage(img, 0, 0, w / 4, h / 4); //参数可自定义
}
} else {
if(_this.Orientation&& _this.Orientation != 1){
console.log("bushiios,需要旋转")
switch (_this.Orientation) {
case 6: //需要顺时针(向左)90度旋转
_this.rotateImg(this, "left", canvas);
break;
case 8: //需要逆时针(向右)90度旋转
_this.rotateImg(this, "right", canvas);
break;
case 3: //需要180度旋转
canvas.width = img.width/4;
canvas.height = img.height/4;
_this.ctx.rotate((180 * Math.PI) / 180);
_this.ctx.drawImage(img, -img.width/4, -img.height/4,img.width/4,img.height/4);
break;
}
}else{
console.log("不是ios系统");
let h = img.height;
let w = img.width;
canvas.height = h / 4; //指定画板的高度,自定义
canvas.width = w / 4; //指定画板的宽度,自定义
_this.ctx.drawImage(img, 0, 0, w / 4, h / 4); //参数可自定义
}
}
let qulity = parseFloat(_this.qulity)
_this.imgUrl = canvas.toDataURL("image/jpeg",qulity);
//清空input的值,防止不能反复提交
if(!_this.isAli){
//不是支付宝H5
_this.$refs[_this.id].value = ''
}
console.log(_this.imgUrl )
};
img.src = url;
},
fileChange(e) {
let file = e.target.files || e.dataTransfer.files;
// console.log(file)
if (!file.length) {
return;
}
let imgfile = file[0];
if (imgfile.size > 200 * 1024) {
//图片大于200kb
console.log("大于200KB");
this.qulity = ((200 * 1024) / imgfile.size).toFixed(5);
} else {
console.log("小于等于200KB");
this.qulity = 1;
}
//获取照片方向角属性,用户旋转控制
let _this = this;
EXIF.getData(imgfile, function() {
EXIF.getAllTags(this);
_this.Orientation = EXIF.getTag(this, "Orientation");
});
let imgUrl = _this.getObjectURL(imgfile);
_this.getUrlBase64(imgUrl);
},
getObjectURL(file) {
var url = null;
if (window.createObjectURL != undefined) {
// basic
url = window.createObjectURL(file);
} else if (window.URL != undefined) {
// mozilla(firefox)
url = window.URL.createObjectURL(file);
} else if (window.webkitURL != undefined) {
// webkit or chrome
url = window.webkitURL.createObjectURL(file);
}
return url;
},
up() {
let _this = this;
ap.chooseImage(
{
count: 1,
sourceType: ["camera"],
publicDomain: false,
useFrontCamera: true,
allowEdit: true
},
function(res) {
_this.getUrlBase64(res.apFilePaths[0]);
}
);
},
wxUp() {
// alert(wx);
console.log(wx);
// alert(1);
wx.chooseImage({
count: 1, // 默认9
sizeType: ["original", "compressed"], // 可以指定是原图还是压缩图,默认二者都有
sourceType: ["album", "camera"], // 可以指定来源是相册还是相机,默认二者都有
success: function(res) {
var localIds = res.localIds; // 返回选定照片的本地ID列表,localId可以作为img标签的src属性显示图片
alert(JSON.stringify(res));
}
});
}
// base64(url) {
// let _this = this;
// let canvas = document.createElement("canvas"); //创建canvas DOM元素
// let ctx = canvas.getContext("2d");
// let img = new Image();
// img.crossOrigin = "anonymous";
// img.onload = function() {
// // alert("333");
// let h = img.height;
// let w = img.width;
// // alert("444");
// canvas.height = h / 4; //指定画板的高度,自定义
// canvas.width = w / 4; //指定画板的宽度,自定义
// // alert("555");
// ctx.drawImage(img, 0, 0, w / 4, h / 4); //参数可自定义
// alert("转换前");
// let dataURL = canvas.toDataURL("image/jpeg", 0.1);
// // canvas.toDataURL('image/jpeg');
// alert("转换后");
// alert("成功!");
// alert(dataURL.length);
// };
// img.src = url;
// }
}
};
</script>
<style lang='scss'>
.photo-page {
.up-img {
width: 0.773333rem;
height: 0.68rem;
}
.show-img {
width: 0.746667rem;
height: 0.746667rem;
}
.text {
color: rgba(65, 56, 56, 0.5);
margin-left: 0.266667rem;
font-size: 0.32rem;
}
.ali-p {
display: flex;
align-items: center;
}
.h5-p {
display: flex;
.change-label {
display: flex;
align-items: center;
width: 100%;
}
}
}
</style>
vue移动端图片压缩及使用EXIF旋转图片
最新推荐文章于 2023-03-03 15:30:07 发布