<template>
<view class="htz-image-upload-list">
<view class="htz-image-upload-Item" v-for="(item,index) in uploadLists" :key="index">
<view class="htz-image-upload-Item-video" v-if="(!/.(gif|jpg|jpeg|png|gif|jpg|png)$/i.test(item))">
<video :disabled="false" :controls="false" :src="item">
<cover-view class="htz-image-upload-Item-video-fixed" @click="previewVideo(item)"></cover-view>
<cover-view class="htz-image-upload-Item-del-cover" v-if="remove && previewVideoSrc==''"
@click="imgDel(index)">×</cover-view>
</video>
</view>
<image v-else :src="item" @click="imgPreview(item)"></image>
<view class="htz-image-upload-Item-del" v-if="remove" @click="imgDel(index)">×</view>
</view>
<view class="htz-image-upload-Item htz-image-upload-Item-add" v-if="uploadLists.length<max && add"
@click="chooseFile">
+
</view>
<view class="preview-full" v-if="previewVideoSrc!=''">
<video :autoplay="true" :src="previewVideoSrc" :show-fullscreen-btn="false">
<cover-view class="preview-full-close" @click="previewVideoClose"> ×
</cover-view>
</video>
</view>
<!-- 加入拍照功能开始 -->
<view class="canmera_box" v-if="canmera_show">
<camera device-position="back" flash="off" style="width: 750rpx; height: 100%;">
<cover-view style="padding: 20rpx 0;width: 100%; color: #FFFFFF;background-color: rgba(0,0,0,0.3);">
<cover-view class="topItem">经度:{{longitude}}</cover-view>
<cover-view class="topItem">纬度:{{latitude}}</cover-view>
<cover-view class="topItem">地址:{{address}}</cover-view>
<cover-view class="topItem">时间:{{nowTime+nowTime2}}</cover-view>
</cover-view>
<button type="primary" style="width: 100%;position: fixed;bottom: 10rpx;left: 0;" @click="takePhoto">拍照</button>
</camera>
<view style="position: absolute;top: -999999px;">
<view>
<canvas :style="{'width':w,'height': h}" canvas-id="firstCanvas"></canvas>
</view>
</view>
</view>
<!-- 加入结束 -->
</view>
</template>
<style>
.canmera_box {
width: 100%;
position: fixed;
z-index: 99999;
top: 0;
left: 0;
height: calc(100vh - 80rpx)
}
.ceshi {
width: 100%;
height: 100%;
position: relative;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-color: #FFFFFF;
color: #2C405A;
opacity: 0.5;
z-index: 100;
}
</style>
<script>
let _this
import QQMapWX from "@/common/qqmap-wx-jssdk";
export default {
name: 'htz-image-upload',
props: {
max: { //展示图片最大值
type: Number,
default: 1,
},
chooseNum: { //选择图片数
type: Number,
default: 9,
},
name: { //发到后台的文件参数名
type: String,
default: 'file',
},
remove: { //是否展示删除按钮
type: Boolean,
default: true,
},
add: { //是否展示添加按钮
type: Boolean,
default: true,
},
disabled: { //是否禁用
type: Boolean,
default: false,
},
sourceType: { //选择照片来源 【ps：H5就别费劲了，设置了也没用。不是我说的，官方文档就这样！！！】
type: Array,
default: () => ['album', 'camera'],
},
action: { //上传地址
type: String,
default: '',
},
headers: { //上传的请求头部
type: Object,
default: () => {},
},
formData: { //HTTP 请求中其他额外的 form data
type: Object,
default: () => {},
},
compress: { //是否需要压缩
type: Boolean,
default: true,
},
quality: { //压缩质量，范围0～100
type: Number,
default: 80,
},
value: { //受控图片列表
type: Array,
default: () => [],
},
uploadSuccess: {
default: (res) => {
return {
success: false,
url: ''
}
},
},
mediaType: { //文件类型 image/video/all
type: String,
default: 'image',
},
maxDuration: { //拍摄视频最长拍摄时间，单位秒。最长支持 60 秒。 (只针对拍摄视频有用)
type: Number,
default: 60,
},
camera: { //'front'、'back'，默认'back'(只针对拍摄视频有用)
type: String,
default: 'back',
},
},
data() {
return {
uploadLists: [],
mediaTypeData: ['image', 'video', 'all'],
previewVideoSrc: '',
nowTime: '', //日期
nowTime2: '', //时间
address: '', //当前地址信息
canmera_src: '',
w: '',
h: '',
longitude:'',
latitude:'',
canmera_show:false
}
},
mounted: function() {
_this = this
_this.get_address()
_this.getTime()
this.$nextTick(function() {
this.uploadLists = this.value;
if (this.mediaTypeData.indexOf(this.mediaType) == -1) {
uni.showModal({
title: '提示',
content: 'mediaType参数不正确',
showCancel: false,
success: function(res) {
if (res.confirm) {
//console.log('用户点击确定');
} else if (res.cancel) {
//console.log('用户点击取消');
}
}
});
}
});
},
watch: {
value(val, oldVal) {
//console.log('value',val, oldVal)
this.uploadLists = val;
},
},
onLoad() {
_this = this
_this.get_address()
_this.getTime()
},
methods: {
getTime: function() {
var date = new Date(),
year = date.getFullYear(),
month = date.getMonth() + 1,
day = date.getDate(),
hour = date.getHours() < 10 ? "0" + date.getHours() : date.getHours(),
minute = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes(),
second = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
month >= 1 && month <= 9 ? (month = "0" + month) : "";
day >= 0 && day <= 9 ? (day = "0" + day) : "";
var timer = year + '-' + month + '-' + day + ' ';
var timer2 = hour + ':' + minute + ':' + second;
_this.nowTime = timer;
_this.nowTime2 = timer2;
console.log(this.nowTime);
console.log(this.nowTime2);
},
get_address(){
var qqmapsdk;
uni.getLocation({
type: 'wgs84',
geocode:true,
success: function(res) {
_this.longitude = res.longitude
_this.latitude = res.latitude
qqmapsdk = new QQMapWX({
key: "662BZ-2EAR6-M34S7-M4NPO-HFV3F-QEBTV" //自己申请的key
});
qqmapsdk.reverseGeocoder({
location: {
latitude: res.latitude,
longitude: res.longitude
},
success(addressRes) {
_this.address = addressRes.result.address;
},
fail(res) {}
});
}
});
},
takePhoto() {
const ctx = uni.createCameraContext();
uni.showLoading({
title: '处理中...'
});
ctx.takePhoto({
quality: 'high',
success: (res) => {
// _this.src = res.tempImagePath
_this.takePhoto_canvas(res.tempImagePath)
}
});
},
takePhoto_canvas(src) {
uni.getImageInfo({
src: src,
success: (ress) => {
_this.w = ress.width / 2 + 'px';
_this.h = ress.height / 2 + 'px';
let ctx = uni.createCanvasContext('firstCanvas',this); /** 创建画布 */
//将图片src放到cancas内，宽高为图片大小
ctx.drawImage(src, 0, 0, ress.width / 2, ress.height / 2)
let textToWidth = ress.width / 2;
let textToHeight = ress.height / 2 ;
// 矩形透明框
ctx.setFillStyle('rgba(0,0,0,0.3)')
ctx.fillRect(0,textToHeight*0.85,textToWidth,textToHeight*0.15);
// 矩形透明框
ctx.setFontSize(10)
ctx.setFillStyle('#FFFFFF')
ctx.rotate(30* Math.PI);
ctx.fillText('经度:'+_this.longitude, textToWidth*0.05, textToHeight*0.88)
ctx.fillText('纬度:'+_this.latitude, textToWidth*0.05, textToHeight*0.91)
ctx.fillText('时间:'+_this.nowTime+_this.nowTime2, textToWidth*0.05, textToHeight*0.94)
ctx.fillText('�
评论0