1、先上效果图：
代码目录结构截图：
2、照片列表页代码
<template>
<view class="u-upload">
<view class="u-list-item u-preview-wrap" v-for="(item, index) in imgList" :key="index"
:style="{
width: 200,
height: 200
}">
<view class="u-delete-icon" @click="deleteItem(index)" :style="{
background: '#fa3534'
}">
<u-icon class="u-icon" name="close" size="20" color="#ffffff"></u-icon>
</view>
<image @click="lookImg(index)" class="u-preview-image"
:src="item.path"></image>
</view>
<view style="display: inline-block;" @click="gotoCamera" v-if="imgList.length<8">
<slot name="addBtn"></slot>
<view class="u-list-item u-add-wrap" hover-class="u-add-wrap__hover" hover-stay-time="150"
:style="{
width: 200,
height: 200
}">
<u-icon name="camera" size="80"></u-icon>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
imgList:[],
}
},
methods: {
// 跳转到拍照页面
gotoCamera(){
uni.$u.route('/pages/camera/camera');
},
// 删除图片
deleteItem(index){
let that = this;
uni.showModal({
title: '提示',
content: '您确定要删除此张照片吗？',
success: async (res) => {
if (res.confirm) {
that.imgList.splice(index,1)
}
}
});
},
lookImg(index){
let photoList = this.imgList.map(item => {
return item.path;
});
// 预览图片
uni.previewImage({
current: index,
urls: photoList,
});
},
}
}
</script>
<style scoped lang="scss">
.u-upload {
// @include vue-flex;
display: flex;
flex-wrap: wrap;
align-items: center;
}
.u-add-tips {
margin-top: 20rpx;
line-height: 40rpx;
}
.u-delete-icon {
position: absolute;
top: 10rpx;
right: 10rpx;
z-index: 10;
background-color: red;
border-radius: 100rpx;
width: 44rpx;
height: 44rpx;
// @include vue-flex;
display: flex;
align-items: center;
justify-content: center;
}
.u-icon {
// @include vue-flex;
display: flex;
align-items: center;
justify-content: center;
}
.u-list-item {
width: 200rpx;
height: 200rpx;
overflow: hidden;
margin: 10rpx;
background: rgb(244, 245, 246);
position: relative;
border-radius: 10rpx;
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
align-items: center;
justify-content: center;
}
.u-preview-wrap {
border: 1px solid rgb(235, 236, 238);
}
.u-preview-image {
display: block;
width: 100%;
height: 100%;
border-radius: 10rpx;
}
</style>3、拍照页面代码
注意两点：
1、代码中的 key: "xxxxx-xxxxx-xxxxx-xxxxx-xxxxx" 换成自己的，这里的key是申请腾讯位置服务获取的秘钥，如何申请请参考这篇博客 ：https://www.cnblogs.com/1549983239yifeng/p/14750266.html
2、如果要获取定位信息，需要在Hbuilder中勾选位置接口，如下图
<template>
<view>
<camera :device-position="device" :flash="flash" @error="error" :style="{ width: '100%',position: 'relative', height: getHeight + 'px' }">
<cover-view class="topBox">
<cover-view class="topItem">{{nowWeek}}</cover-view>
<cover-view class="topItem">{{nowTime +' '+nowTime2}}</cover-view>
<cover-view class="topItem">{{address}}</cover-view>
</cover-view>
<cover-image @click="xzBtn" class="xzImg" src="https://cdn.zhoukaiwen.com/xz.png"></cover-image>
<cover-image @click="positionBtn" class="positionImg" src="/static/images/dingwei.png"></cover-image>
<cover-view class="cameraBtn" @click="takePhoto">
<cover-view class="cameraBtn2"></cover-view>
</cover-view>
</camera>
<view style="position: absolute;top: -999999px;">
<view><canvas :style="{ width: w, height: h }" canvas-id="firstCanvas"></canvas></view>
</view>
</view>
</template>
<script>
import QQMapWX from "@/common/qqmap-wx-jssdk.js";
export default {
data() {
return {
getHeight: '200',
device: 'back', //前置或后置摄像头，值为front, back
flash: 'off', //闪光灯，值为auto, on, off
nowTime: '', //日期
nowTime2: '', //时间
nowTime2: '', //时间
nowWeek: '', // 周几
address: '', //当前地址信息
city: '',
district: '',
name:'',
imgList: [
],
imgListData: '',
rreportShow: false, //选择照片备注内容弹窗
src:'',
w:'',
h:''
}
},
onLoad() {
const that = this;
uni.getSystemInfo({
success: function(res) {
that.getHeight = res.windowHeight;
}
});
this.getTime();
uni.getLocation({
type: 'wgs84',
success: function(res) {
let qqmapsdk = new QQMapWX({
key: "xxxxx-xxxxx-xxxxx-xxxxx-xxxxx" //自己申请的key
});
qqmapsdk.reverseGeocoder({
location: {
latitude: res.latitude,
longitude: res.longitude
},
success(addressRes) {
that.address = addressRes.result.address;
that.city = addressRes.result.address_component.city;
that.district = addressRes.result.address_component.district;
},
fail(res) {}
});
}
});
},
methods: {
xzBtn() {
if (this.device == 'front') {
this.device = 'back'
} else {
this.device = 'front'
}
},
// 点击拍照
takePhoto() {
var that = this;
if (this.imgList.length < 3) {
const ctx = uni.createCameraContext();
ctx.takePhoto({
quality: 'high',
success: (ress) => {
var tempImagePath = ress.tempImagePath;
// 获取图片信息
uni.getImageInfo({
src: ress.tempImagePath,
success: res => {
that.w = res.width / 3 + 'px';
that.h = res.height / 3.01 + 'px';
let ctx = uni.createCanvasContext('firstCanvas'); /** 创建画布 */
//将图片src放到cancas内，宽高为图片大小
ctx.drawImage(ress.tempImagePath, 0, 0, res.width / 3, res.height / 3);
ctx.setFontSize(18);
ctx.setFillStyle('#FFFFFF');
ctx.setTextAlign('center');
// // ctx.rotate(30 * Math.PI / 180);//0.03
let textToWidth = (res.width / 3) * 0.5;
let textToHeight = (res.height / 3) * 0.9;
ctx.fillText(that.nowTime2, textToWidth, textToHeight);
ctx.setFontSize(12);
let textToHeight2 = (res.height / 3) * 0.94;
ctx.fillText(that.nowTime + ' ' + that.nowWeek, textToWidth, textToHeight2);
ctx.setFontSize(9);
let textToHeight3 = (res.height / 3) * 0.98;
ctx.fillText(' 📍 '+ that.address, textToWidth, textToHeight3);
ctx.draw(false, () => {
setTimeout(() => {
uni.canvasToTempFilePath({
canvasId: 'firstCanvas',
success: res1 => {
tempImagePath = res1.tempFilePath;
// console.log('----------',tempImagePath);
uni.getFileSystemManager().readFile({// 【重点来啦】人家自提供的转码API
filePath:tempImagePath,// 所需转码图像路径
encoding:"base64",// 转码类型
success:(res)=>{
// 生成base64
let imageBase64 = 'data:image/png;base64,'+res.data;
let pages = getCurrentPages();
//prevPage 是获取上一个页面的js里面的pages的所有信息。 -2 是上一个页面，-3是上上个页面以此类推。
let prevPage = pages[pages.length - 2];
// 将数据返回上一个页面
prevPage.$vm.imgList.push({
path: tempImagePath,
date: that.nowTime,
time: that.nowTime3,
week: that.nowWeek,
address: that.address,
imageBase64: imageBase64
})
uni.navigateBack();
}
})
// console.log(this.imgList);
// var arr = this.imgList
// var str = '';
// for (var i = 0; i < arr.length; i++) {
// str += arr[i].src + ",";
// }
// this.imgListData = str;
// console.log(this.imgListData)
}
});
}, 1000);
});
}
});
}
});
} else {
uni.showToast({
title: '最大上传3张照片',
duration: 2000,
icon: 'none'
});
}
},
// 定位选择
positionBtn(){
let that = this
uni.chooseLocation({
success: (res) => {
that.address = that.city+that.district+res.name
}
})
},
getTime: function() {
var weekarr = new Array("日", "一", "二", "三", "四", "五", "六");
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 timer3 = hour + ':' + minute + ':' + second;
var timer2 = hour + ':' + minute
this.nowTime = timer;
this.nowTime2 = timer2;
this.nowTime3 = timer3;
this.nowWeek = '星期' + weekarr[date.getDay()];
// console.log(this.nowTime);
// console.log(this.nowTime2);
},
error(e) {
console.log(e.detail);
},
goBack(){
uni.navigateBack({
delta:1,//返回层数，2则上上页
})
}
}
}
</script>
<style lang="scss">
.topBox {
width: 750rpx;
box-sizing: border-box;
padding-top: 200rpx;
padding-left: 30rpx;
color: #EEEEEE;
font-size: 34rpx;
.topItem {
width: 100%;
white-space: pre-wrap;
margin-bottom: 15rpx;
}
}
.xzImg {
width: 52rpx;
height: auto;
position: absolute;
right: 44rpx;
bottom: 580rpx;
}
.positionImg {
width: 55rpx;
height: auto;
position: absolute;
right: 44rpx;
bottom: 450rpx;
}
.cameraBtn {
width: 120rpx;
height: 120rpx;
line-height: 120rpx;
border: 6rpx #FFFFFF solid;
border-radius: 50%;
padding: 8rpx;
position: absolute;
left: calc(50% - 60rpx);
bottom: 210rpx;
}
.cameraBtn2 {
width: 100%;
height: 100%;
border-radius: 50%;
background-color: #FFFFFF;
text-align: center;
color: #007AFF;
}
</style>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
