<template>
|
<div class="upload">
|
<div class="IDcardbgDiv">
|
<x-img class="imgcontent" :default-src="defaultImg" :src="currentImg" alt=""></x-img>
|
</div>
|
<x-button class="IDCardUpLoadBut" v-text="butName"></x-button>
|
<input class="fileUploadInput" type="file" @change="handle($event)" capture="camera" accept="image/*">
|
</div>
|
</template>
|
<script>
|
import EXIF from 'exif-js';
|
import {XImg, XButton} from 'vux';
|
|
export default {
|
data () {
|
return {
|
imgSrc: ''
|
};
|
},
|
props: [
|
'butName',
|
'defaultImg',
|
'currentImg'
|
],
|
components: {
|
XImg, XButton
|
},
|
methods: {
|
handle (evt) { // 图片变化后的回调函数
|
const files = Array.prototype.slice.call(evt.target.files);
|
let that = this;
|
files.forEach(function (file, i) {
|
var orientation;
|
if (!/\/(?:jpeg|png|gif)/i.test(file.type)) return;
|
// 读取图片的元信息
|
EXIF.getData(file, function () {
|
orientation = EXIF.getTag(this, 'Orientation');
|
});
|
|
let reader = new FileReader();
|
reader.onload = function () {
|
let result = this.result;
|
// 使用exif
|
that.getImgData(this.result, orientation, function (data) {
|
// 这里可以使用校正后的图片data了
|
var img = new Image();
|
img.src = data;
|
// 图片加载完毕之后进行压缩，然后上传
|
if (img.complete) {
|
callback();
|
} else {
|
img.onload = callback;
|
}
|
function callback() {
|
|
var data = that.compress(img);
|
// that.imgSrc = data;
|
that.upload(data, file.type, file.name);
|
// 发送后台请求
|
}
|
});
|
};
|
reader.readAsDataURL(file);
|
});
|
},
|
// 压缩图片
|
compress (img) {
|
// 用于压缩图片的canvas
|
let canvas = document.createElement('canvas');
|
let ctx = canvas.getContext('2d');
|
|
// 瓦片canvas
|
var tCanvas = document.createElement('canvas');
|
var tctx = tCanvas.getContext('2d');
|
|
let width = img.width;
|
let height = img.height;
|
|
// 如果图片大于四百万像素，计算压缩比并将大小压至400万以下
|
var ratio;
|
if ((ratio = width * height / 4000000) > 1) {
|
ratio = Math.sqrt(ratio);
|
width /= ratio;
|
height /= ratio;
|
} else {
|
ratio = 1;
|
}
|
canvas.width = width * 2;
|
canvas.height = height * 2;
|
// 铺底色
|
ctx.fillStyle = '#fff';
|
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
// 如果图片像素大于100万则使用瓦片绘制
|
var count;
|
if ((count = width * height / 1000000) > 1) {
|
count = ~~(Math.sqrt(count) + 1); // 计算要分成多少块瓦片
|
// 计算每块瓦片的宽和高
|
var nw = ~~(width / count);
|
var nh = ~~(height / count);
|
tCanvas.width = nw;
|
tCanvas.height = nh;
|
for (var i = 0; i < count; i++) {
|
for (var j = 0; j < count; j++) {
|
tctx.drawImage(img, i * nw * ratio, j * nh * ratio, nw * ratio * 2, nh * ratio * 2, 0, 0, nw, nh);
|
ctx.drawImage(tCanvas, i * nw, j * nh, nw * 2, nh * 2);
|
}
|
}
|
} else {
|
ctx.drawImage(img, 0, 0, width * 2, height * 2);
|
}
|
|
|
// 进行最小压缩
|
let ndata = canvas.toDataURL('image/jpeg', 0.8);
|
return ndata;
|
},
|
// 上传图片
|
upload (basestr, type, name) {
|
let text = window.atob(basestr.split(',')[1]);
|
let buffer = new ArrayBuffer(text.length);
|
let ubuffer = new Uint8Array(buffer);
|
|
for (let i = 0; i < text.length; i++) {
|
ubuffer[i] = text.charCodeAt(i);
|
}
|
|
let Builder = window.WebKitBlobBuilder || window.MozBlobBuilder;
|
let blob;
|
|
if (Builder) {
|
let builder = new Builder();
|
builder.append(buffer);
|
blob = builder.getBlob(type);
|
} else {
|
blob = new window.Blob([buffer], {type: type});
|
}
|
|
var post = {
|
'file': basestr,
|
'extName': 'jpeg'
|
};
|
// 选择完毕触发事件
|
this.$emit('select-complete', post);
|
},
|
// 图片旋转处理
|
getImgData: function (img, dir, next) {
|
// @param {string} img 图片的base64
|
// @param {int} dir exif获取的方向信息
|
// @param {function} next 回调方法，返回校正方向后的base64
|
var image = new Image();
|
let canvas = document.createElement('canvas');
|
let ctx = canvas.getContext('2d');
|
image.onload = function () {
|
let resultWidth = 0;
|
let resultHeight = 0;
|
let maxWidthOrHeight = 1024;
|
let drawWidth = this.naturalWidth;
|
let drawHeight = this.naturalHeight;
|
|
// 以下改变图片大小，控制最大宽度为1024
|
var maxSide = Math.max(drawWidth, drawHeight);
|
if (maxSide > maxWidthOrHeight) {
|
let minSide = Math.min(drawWidth, drawHeight);
|
minSide = minSide / maxSide * maxWidthOrHeight;
|
maxSide = maxWidthOrHeight;
|
if (drawWidth > drawHeight) {
|
resultWidth = maxSide;
|
resultHeight = minSide;
|
} else {
|
resultWidth = minSide;
|
resultHeight = maxSide;
|
}
|
}
|
|
if (dir === 3) {
|
canvas.width = resultWidth;
|
canvas.height = resultHeight;
|
ctx.translate(resultWidth, resultHeight);
|
ctx.rotate(Math.PI);
|
} else if (dir === 6) {
|
canvas.width = resultHeight;
|
canvas.height = resultWidth;
|
ctx.translate(resultHeight, 0);
|
ctx.rotate(Math.PI / 2);
|
} else if (dir === 8) {
|
canvas.width = resultHeight;
|
canvas.height = resultWidth;
|
ctx.translate(0, resultWidth);
|
ctx.rotate(-Math.PI / 2);
|
} else {
|
canvas.width = resultWidth;
|
canvas.height = resultHeight;
|
}
|
ctx.drawImage(this, 0, 0, resultWidth, resultHeight)
|
// 返回校正图片
|
next(canvas.toDataURL('image/jpeg', 0.8));
|
}
|
image.src = img;
|
}
|
}
|
};
|
</script>
|
<style lang="less">
|
@import "../../style/mixin";
|
.IDcardbgDiv {
|
background-image: url('../../assets/img/IDcardbg.png');
|
background-size: 130px 80px;
|
}
|
|
.imgcontent {
|
width: auto;
|
height: 70px;
|
padding-top: 5px;
|
}
|
|
.fileUploadInput {
|
opacity: 0;
|
z-index: 99;
|
position: absolute;
|
top: 0;
|
left: 0;
|
width: 100%;
|
height: 100%;
|
}
|
|
.IDCardUpLoadBut {
|
margin-top: 20px;
|
width: 80%;
|
height: 30px;
|
color: @color-white;
|
border-radius: 15px;
|
border: none;
|
font-size: @font-size-small;
|
.color-linear-gradient(@color-primary-light, @color-primary, 90deg);
|
}
|
|
.upload {
|
position: relative;
|
width: 130px;
|
margin: 0 auto;
|
text-align: center;
|
}
|
</style>
|
