自定义相机拍摄功能，上传照片，视频插件

<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('�