1.下载依赖
cnpm install exif-js --save
2.使用Demo
<style lang="less" scoped>
.commitPhoto {
margin: 0 auto;
text-align: center;
.noshow {
position: absolute;
top: 0;
width: 100%;
height: 100%;
opacity: 1;
z-index: -1;
.htmlToImage {
background: #fff;
width: 200%;
height: 200%;
display: flex;
justify-content: center;
align-items: center;
.image-to-base64 {
width: 200%;
height: 200%;
object-fit: cover;
}
.rotate1 {
transform: rotate(0deg);
}
.rotate2 {
transform: rotate(180deg);
}
.rotate3 {
transform: rotate(90deg);
}
.rotate4 {
transform: rotate(270deg);
}
}
}
.uploader-box {
padding: 25px;
.upload-title {
font-size: 12px;
color: #fff;
opacity: 0.6;
}
.assistance {
width: 235px;
height: 40px;
background: rgba(255, 255, 255, 0.3);
border-radius: 4px;
margin: 25px auto 0;
.assistance-icon {
display: flex;
align-items: center;
height: 40px;
padding: 0 5px 0 15px;
img {
width: 16px;
height: 16px;
}
}
.assistance-number {
font-size: 14px;
line-height: 40px;
color: #fff;
}
.assistance-btn {
height: 40px;
display: flex;
align-items: center;
margin-right: 12px;
}
}
}
}
</style>
<template>
<div class="commitPhoto">
<!-- 头像base流 -->
<div class="noshow">
<div class="canvasImg">
<div class="htmlToImage"
ref="imageWrapper">
<img :src="nowFileContent"
class="image-to-base64 rotate1"
v-if="rotateState==1">
<img :src="nowFileContent"
class="image-to-base64 rotate2"
v-else-if="rotateState==2">
<img :src="nowFileContent"
class="image-to-base64 rotate3"
v-else-if="rotateState==3">
<img :src="nowFileContent"
class="image-to-base64 rotate4"
v-else-if="rotateState==4">
</div>
</div>
</div>
<div class="uploader-box">
<van-uploader v-model="fileList"
multiple
:max-count="3"
:before-read="beforeRead"
:after-read="afterRead"
:before-delete="deleteFile"
:max-size='10485760'
@oversize="overSizeToast" />
<div class="upload-title">上传图片(最多三张)</div>
<div class="assistance clearfix">
<div class="assistance-icon left"><img src="../../common/image/人气@2x.png"></div>
<div class="assistance-number left">立刻转发增加人气</div>
<div class="assistance-btn right">
<v-button width="100"
bgColor="linear-gradient(180deg,rgba(255,162,113,1) 0%,rgba(238,70,59,1) 100%)"
borderRadius='25px'
border='0px solid #fff'
fontSize='14px'
boxShadow='0px 1px 3px 0px rgba(237,237,237,0.5)'
height="28"
color='#fff'
@click="goToShare">转发</v-button>
</div>
</div>
</div>
</div>
</template>
<script>
import Exif from 'exif-js'
//Vuex公共状态动作
import { mapActions } from 'vuex'
//执行成功
const ERROR_CODE = "ERRORCODE0000";
import { Toast } from 'vant';
import closeLoading from '../../../mixins/closeLoading'
export default {
name: 'commitPhoto',
mixins: [closeLoading],
components: {},
props: {},
data() {
return {
rotateState: 1,
fileList: [
// { url: 'https://img.yzcdn.cn/vant/leaf.jpg' },
// // Uploader 根据文件后缀来判断是否为图片文件
// // 如果图片 URL 中不包含类型信息,可以添加 isImage 标记来声明
// { url: 'https://img.yzcdn.cn/vant/leaf.jpg' }
],
appOpenid: this.$route.params.appOpenid,
nowFileContent: '',
senDateURl: '',
lookDateURl: '',
}
},
watch: {},
computed: {},
methods: {
//Vuex辅助函数,将公共状态中的方法映射成当前的this方法
...mapActions(['SET_SHARELEADERSTATE']),
goToShare() {
this.SET_SHARELEADERSTATE(true);
},
initImgList() {
let parame2 = {
"functionName": "productbiz.service.puhui.financial.FinancialSummitService",
"methodName": "getImageList",
"data": {
"openId": this.appOpenid
}
}
this.$post(JSON.stringify(parame2)).then(result => {
console.log('初始化图片参数', parame2)
console.log('初始化图片结果', result)
if (result.errorCode == ERROR_CODE && result.data.codeType == 200) {
console.log('初始化图片成功结果', result.data.imageList)
this.fileList = result.data.imageList;
}
})
},
// 返回布尔值
beforeRead(file) {
this.imgPreview(file);
if (file.type == 'image/jpeg' || file.type == 'image/png') {
return true;
} else {
Toast('请上传单张图片');
return false;
}
},
overSizeToast() {
Toast.fail('已超过图片最大限制10M,请重新上传');
},
imgPreview(file) {
let _this=this;
let self = this;
let Orientation;
let getImageWidth;
let getImageHeight;
var getHeight=document.getElementsByClassName('noshow')[0].clientHeight;
var getWeight=document.getElementsByClassName('noshow')[0].clientWidth;
console.log('123456', getHeight,getWeight)
//去获取拍照时的信息,解决拍出来的照片旋转问题
Exif.getData(file, function () {
Orientation = Exif.getTag(file, 'Orientation');
if (Orientation == 1) {
_this.rotateState = 1;
} else if (Orientation == 3) {
_this.rotateState = 2;
} else if (Orientation == 6) {
_this.rotateState = 3;
document.getElementsByClassName('htmlToImage')[0].style.clientWidth=getWeight;
document.getElementsByClassName('htmlToImage')[0].style.clientHeight=getHeight;
console.log('宽度',document.getElementsByClassName('htmlToImage')[0].style.clientWidth);
console.log('高度',document.getElementsByClassName('htmlToImage')[0].style.clientHeight);
} else if (Orientation == 8) {
_this.rotateState = 4;
document.getElementsByClassName('htmlToImage')[0].style.clientWidth=getWeight;
document.getElementsByClassName('htmlToImage')[0].style.clientHeight=getHeight;
}
});
},
afterRead(file) {
this.nowFileContent = file.content;
// var getHeight=document.getElementsByClassName('noshow')[0].clientHeight;
setTimeout(() => {
html2canvas(this.$refs.imageWrapper, {//eslint-disable-line
backgroundColor: null,
y: 0,
useCORS: true,//允许跨域(图片跨域相关)
allowTaint: false, //允许跨域(图片跨域相关)
}).then((canvas) => {
this.lookDateURl = canvas.toDataURL("image/png");
this.senDateURl = this.lookDateURl.replace('data:image/png;base64,', "");
console.log('生成可查看图片', this.lookDateURl);
let parames =
{
"moduleName": "",
"functionName": "productbiz.service.puhui.financial.FinancialSummitService",
"methodName": "uploadImage",
"data": {
file: this.senDateURl,
openId: this.appOpenid,
filetype: 'image/png'
}
}
this.$post(JSON.stringify(parames)).then(result => {
console.log('图片参数', parames)
console.log('图片结果', result)
if (result.errorCode == ERROR_CODE && result.data.codeType == 200) {
console.log('图片上传成功结果', result)
}
})
});
}, 250);
},
deleteFile(file, detail) {
console.log('删除图片', detail.index);
console.log('删除图片列表', this.fileList);
let parame1 =
{
"functionName": "productbiz.service.puhui.financial.FinancialSummitService",
"methodName": "deleteImage",
"data": {
id: this.fileList[detail.index].id
}
}
this.$post(JSON.stringify(parame1)).then(result => {
console.log('删除图片参数', parame1)
console.log('删除图片结果', result)
if (result.errorCode == ERROR_CODE && result.data.codeType == 200) {
console.log('删除图片成功结果', result)
}
})
this.fileList.splice(detail.index, 1);
}
},
created() {
this.initImgList();
},
mounted() {
}
}
</script>