396 lines
8.8 KiB
Vue
396 lines
8.8 KiB
Vue
|
<template xlang="wxml" minapp="mpvue">
|
|||
|
|
<view class="imageCompress">
|
|||
|
|
<view class="photo" v-if="result.length > 0">
|
|||
|
|
<view class="item" v-for="(item, index) in result" :key="index">
|
|||
|
|
<image :src="item.url" @tap="previewPhoto(item.url)" mode="widthFix"></image>
|
|||
|
|
<view class="remote-photo-tag" @tap="removePhoto(index)"><image src="/static/images/icon-remove.png"></image></view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="upload" v-if="result.length < limit">
|
|||
|
|
<view class="info" @tap="upload()">
|
|||
|
|
<image src="/static/images/icon-photo.png"></image>
|
|||
|
|
<text>{{ tip }}</text>
|
|||
|
|
<text v-if="remark" class="remark">{{ remark }}</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<canvas
|
|||
|
|
class="canvas"
|
|||
|
|
:canvas-id="canvasId"
|
|||
|
|
:style="'width:' + destWidth + 'px;height:' + destHeight + 'px;top:' + -canvasIndex * 9000 + 'px;left:' + -canvasIndex * 9000 + 'px'"
|
|||
|
|
></canvas>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
<script>
|
|||
|
|
export default {
|
|||
|
|
name: 'imageCompress',
|
|||
|
|
props: {
|
|||
|
|
/*图片类型*/
|
|||
|
|
type: {
|
|||
|
|
type: String,
|
|||
|
|
default: 'water'
|
|||
|
|
},
|
|||
|
|
/*上传限制*/
|
|||
|
|
limit: {
|
|||
|
|
type: Number,
|
|||
|
|
default: 1
|
|||
|
|
},
|
|||
|
|
/*最大允许宽度*/
|
|||
|
|
maxWidth: {
|
|||
|
|
type: Number,
|
|||
|
|
default: 750
|
|||
|
|
},
|
|||
|
|
/*默认图片url（单张）*/
|
|||
|
|
src: {
|
|||
|
|
type: String,
|
|||
|
|
default: ''
|
|||
|
|
},
|
|||
|
|
/*默认图片url（多张）*/
|
|||
|
|
list: {
|
|||
|
|
type: Array,
|
|||
|
|
default: () => {
|
|||
|
|
return [];
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
/*上传提示*/
|
|||
|
|
tip: {
|
|||
|
|
type: String,
|
|||
|
|
default: ''
|
|||
|
|
},
|
|||
|
|
/*上传备注*/
|
|||
|
|
remark: {
|
|||
|
|
type: String,
|
|||
|
|
default: ''
|
|||
|
|
},
|
|||
|
|
/*是否上传至服务端*/
|
|||
|
|
isUploadServer: {
|
|||
|
|
type: Boolean,
|
|||
|
|
default: true
|
|||
|
|
},
|
|||
|
|
/*服务端url*/
|
|||
|
|
serverUrl: {
|
|||
|
|
type: String,
|
|||
|
|
default: ''
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
result: [],
|
|||
|
|
uploadPhoto: [],
|
|||
|
|
photoIndex: 0,
|
|||
|
|
uploadIndex: 1,
|
|||
|
|
canvasIndex: 1,
|
|||
|
|
canvasId: 'canvas',
|
|||
|
|
destWidth: 750,
|
|||
|
|
destHeight: 750
|
|||
|
|
};
|
|||
|
|
},
|
|||
|
|
created() {
|
|||
|
|
/*默认值初始化*/
|
|||
|
|
this.initDefaultValue();
|
|||
|
|
|
|||
|
|
// #ifdef H5
|
|||
|
|
this.canvasId = Date.now().toString(36);
|
|||
|
|
// #endif
|
|||
|
|
},
|
|||
|
|
watch: {
|
|||
|
|
src: function(newVal, oldVal) {
|
|||
|
|
if (this.result.length == 0 && this.src) {
|
|||
|
|
console.log('refresh');
|
|||
|
|
this.src = newVal;
|
|||
|
|
this.initDefaultValue();
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
list: function(newVal, oldVal) {
|
|||
|
|
if (this.result.length == 0 && this.list.length > 0) {
|
|||
|
|
this.list = newVal;
|
|||
|
|
this.initDefaultValue();
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
tip: function(newVal, oldVal) {
|
|||
|
|
this.tip = newVal;
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
/*初始化默认值*/
|
|||
|
|
initDefaultValue() {
|
|||
|
|
if (this.result.length == 0) {
|
|||
|
|
/*单张*/
|
|||
|
|
if (this.src) {
|
|||
|
|
let data = { url: this.src };
|
|||
|
|
this.result.push(data);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/*多张*/
|
|||
|
|
if (this.list.length > 0) {
|
|||
|
|
this.list.forEach(item => {
|
|||
|
|
let data = { url: item };
|
|||
|
|
this.result.push(data);
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
/*上传图片*/
|
|||
|
|
upload() {
|
|||
|
|
let maxUploadCount = this.limit;
|
|||
|
|
if (this.limit > 1) {
|
|||
|
|
maxUploadCount = this.limit - this.result.length;
|
|||
|
|
}
|
|||
|
|
uni.chooseImage({
|
|||
|
|
count: maxUploadCount,
|
|||
|
|
sizeType: ['compressed'], // 指定只能为压缩图，首先进行一次默认压缩
|
|||
|
|
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
|
|||
|
|
success: res => {
|
|||
|
|
this.uploadPhoto = res.tempFilePaths;
|
|||
|
|
this.uploadIndex = 0;
|
|||
|
|
if (this.limit > 1 && this.uploadPhoto.length > maxUploadCount) {
|
|||
|
|
if (this.result.length > 0) {
|
|||
|
|
this.$alert('只能再上传' + maxUploadCount + '张', 'warning');
|
|||
|
|
} else {
|
|||
|
|
this.$alert('最多只能上传' + maxUploadCount + '张', 'warning');
|
|||
|
|
}
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
if (this.limit == 1) {
|
|||
|
|
this.result = [];
|
|||
|
|
this.$loading('图片上传…');
|
|||
|
|
} else {
|
|||
|
|
this.initLoading();
|
|||
|
|
}
|
|||
|
|
this.compress(this.uploadPhoto[this.uploadIndex]);
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
/*压缩图片*/
|
|||
|
|
compress(photo) {
|
|||
|
|
uni.getImageInfo({
|
|||
|
|
src: photo,
|
|||
|
|
success: imageInfo => {
|
|||
|
|
let canvasWidth = imageInfo.width;
|
|||
|
|
let canvasHeight = imageInfo.height;
|
|||
|
|
while (canvasWidth > this.maxWidth) {
|
|||
|
|
canvasWidth = this.maxWidth;
|
|||
|
|
canvasHeight = Math.trunc((imageInfo.height / imageInfo.width) * this.maxWidth);
|
|||
|
|
}
|
|||
|
|
this.destWidth = canvasWidth;
|
|||
|
|
this.destHeight = canvasHeight;
|
|||
|
|
|
|||
|
|
/*绘制时间*/
|
|||
|
|
let ctxTime = 10;
|
|||
|
|
// #ifdef H5
|
|||
|
|
ctxTime = this.canvasTime();
|
|||
|
|
// #endif
|
|||
|
|
|
|||
|
|
/*绘制类型*/
|
|||
|
|
let fileType = imageInfo.path.replace(/^.+\./, '');
|
|||
|
|
if (fileType == 'png') {
|
|||
|
|
fileType = 'png';
|
|||
|
|
} else {
|
|||
|
|
fileType = 'jpg';
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/*绘制*/
|
|||
|
|
let ctx = wx.createCanvasContext(this.canvasId, this);
|
|||
|
|
setTimeout(() => {
|
|||
|
|
ctx.drawImage(imageInfo.path, 0, 0, this.destWidth, this.destHeight);
|
|||
|
|
ctx.draw(false, () => {
|
|||
|
|
/*绘制时间*/
|
|||
|
|
let drawTime = 10;
|
|||
|
|
// #ifdef MP
|
|||
|
|
drawTime = this.canvasTime();
|
|||
|
|
// #endif
|
|||
|
|
setTimeout(() => {
|
|||
|
|
uni.canvasToTempFilePath(
|
|||
|
|
{
|
|||
|
|
x: 0,
|
|||
|
|
y: 0,
|
|||
|
|
width: this.destWidth,
|
|||
|
|
height: this.destHeight,
|
|||
|
|
destWidth: this.destWidth,
|
|||
|
|
destHeight: this.destHeight,
|
|||
|
|
fileType: fileType,
|
|||
|
|
canvasId: this.canvasId,
|
|||
|
|
success: res => {
|
|||
|
|
this.submit(res.tempFilePath);
|
|||
|
|
|
|||
|
|
/*上传多张*/
|
|||
|
|
if (this.uploadPhoto.length - 1 != this.uploadIndex) {
|
|||
|
|
this.uploadIndex = this.uploadIndex + 1;
|
|||
|
|
this.initLoading();
|
|||
|
|
this.compress(this.uploadPhoto[this.uploadIndex]);
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
fail: err => {
|
|||
|
|
console.log(err);
|
|||
|
|
},
|
|||
|
|
complete: res => {
|
|||
|
|
this.canvasIndex += 1;
|
|||
|
|
// #ifdef H5
|
|||
|
|
this.canvasId = Date.now().toString('36');
|
|||
|
|
// #endif
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
this
|
|||
|
|
);
|
|||
|
|
}, drawTime);
|
|||
|
|
});
|
|||
|
|
}, ctxTime);
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
/*绘制时间*/
|
|||
|
|
canvasTime() {
|
|||
|
|
let time = this.maxWidth / 2;
|
|||
|
|
if (time >= 600) {
|
|||
|
|
return 600;
|
|||
|
|
} else if (time <= 100) {
|
|||
|
|
return 100;
|
|||
|
|
} else {
|
|||
|
|
return time;
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
/*刷新加载提示*/
|
|||
|
|
initLoading() {
|
|||
|
|
if (this.uploadPhoto.length > 1) {
|
|||
|
|
let loadingTxt = '图片上传（' + (this.uploadIndex + 1) + '/' + this.uploadPhoto.length + '）';
|
|||
|
|
this.$loading(loadingTxt);
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
/*上传提交*/
|
|||
|
|
submit(photoUrl) {
|
|||
|
|
/*不上传服务端*/
|
|||
|
|
if (!this.isUploadServer) {
|
|||
|
|
let data = { url: photoUrl };
|
|||
|
|
this.result.push(data);
|
|||
|
|
this.$emit('upload', data);
|
|||
|
|
if (this.uploadPhoto.length - 1 == this.uploadIndex) {
|
|||
|
|
uni.hideLoading();
|
|||
|
|
}
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/*默认上传url*/
|
|||
|
|
let serverUrl = this.serverUrl;
|
|||
|
|
if (serverUrl == '') {
|
|||
|
|
serverUrl = this.$api.user.upload;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/*上传至服务端*/
|
|||
|
|
this.$app.uploadFile({
|
|||
|
|
url: serverUrl,
|
|||
|
|
filePath: photoUrl,
|
|||
|
|
name: 'file',
|
|||
|
|
formData: { type: this.type },
|
|||
|
|
success: res => {
|
|||
|
|
if (res.code == 0) {
|
|||
|
|
let data = { url: res.data.url, detail: res.data };
|
|||
|
|
this.result.push(data);
|
|||
|
|
console.log(this.result);
|
|||
|
|
this.$emit('upload', data);
|
|||
|
|
} else {
|
|||
|
|
this.$alert(res.msg, 'warning');
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
complete: res => {
|
|||
|
|
if (this.uploadPhoto.length - 1 == this.uploadIndex) {
|
|||
|
|
uni.hideLoading();
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
/*删除图片*/
|
|||
|
|
removePhoto(index) {
|
|||
|
|
this.photoIndex -= 1;
|
|||
|
|
this.result.splice(index, 1);
|
|||
|
|
this.$emit('remove', index);
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
/*预览图片*/
|
|||
|
|
previewPhoto(photoUrl) {
|
|||
|
|
uni.previewImage({
|
|||
|
|
current: 0,
|
|||
|
|
urls: [photoUrl]
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="scss" scoped>
|
|||
|
|
.imageCompress {
|
|||
|
|
.photo {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
margin: 0 30rpx;
|
|||
|
|
.item {
|
|||
|
|
position: relative;
|
|||
|
|
margin: 34rpx 0 0;
|
|||
|
|
width: 100%;
|
|||
|
|
line-height: 0;
|
|||
|
|
&:first-child {
|
|||
|
|
margin-top: 20rpx;
|
|||
|
|
}
|
|||
|
|
&:last-child {
|
|||
|
|
margin-bottom: 20rpx;
|
|||
|
|
}
|
|||
|
|
image {
|
|||
|
|
width: 100%;
|
|||
|
|
}
|
|||
|
|
.remote-photo-tag {
|
|||
|
|
position: absolute;
|
|||
|
|
top: -20rpx;
|
|||
|
|
right: -20rpx;
|
|||
|
|
z-index: 100;
|
|||
|
|
image {
|
|||
|
|
width: 40rpx;
|
|||
|
|
height: 40rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.upload {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: center;
|
|||
|
|
.info {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
width: 500rpx;
|
|||
|
|
height: 340rpx;
|
|||
|
|
border: 1rpx dashed #026836;
|
|||
|
|
border-radius: 10rpx;
|
|||
|
|
margin-top: 34rpx;
|
|||
|
|
padding: 15rpx 0;
|
|||
|
|
&:first-child {
|
|||
|
|
margin-top: 20rpx;
|
|||
|
|
}
|
|||
|
|
&:last-child {
|
|||
|
|
margin-bottom: 20rpx;
|
|||
|
|
}
|
|||
|
|
image {
|
|||
|
|
width: 100rpx;
|
|||
|
|
height: 100rpx;
|
|||
|
|
}
|
|||
|
|
text {
|
|||
|
|
padding: 15rpx 50rpx 0;
|
|||
|
|
line-height: normal;
|
|||
|
|
text-align: center;
|
|||
|
|
}
|
|||
|
|
.remark {
|
|||
|
|
color: #848c98;
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.canvas {
|
|||
|
|
position: fixed;
|
|||
|
|
z-index: -9999;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|