128 lines
4.7 KiB
Vue
128 lines
4.7 KiB
Vue
<template>
|
||
<view>
|
||
<canvas canvas-id="myCanvas" :style="`width:${imgList.imgWidth}px;height:${imgList.imgHeight}px;`"
|
||
style="position: fixed;top:0px;left: 0rpx;"></canvas>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
imgUrl: '',
|
||
date:'',//现在时间
|
||
}
|
||
},
|
||
props: ['imgList'],
|
||
watch: {
|
||
|
||
},
|
||
mounted() {
|
||
console.log("啦啦啦啦啦", this.imgList)
|
||
let that = this;
|
||
setInterval(function() {
|
||
that.date = Date.parse(new Date());
|
||
}, 1000);
|
||
this.date = this.dateFormat(new Date().toISOString())
|
||
this.getPosition();
|
||
this.canversImg()
|
||
},
|
||
methods: {
|
||
canversImg() {
|
||
let that = this
|
||
console.log('我开始画啦')
|
||
const ctx = uni.createCanvasContext('myCanvas', that); //获取一个画布对象
|
||
ctx.drawImage(that.imgList.imgUrl, 0, 0, that.imgList.imgWidth, that.imgList
|
||
.imgHeight); //画一个图片底图（路径，位置，大小）
|
||
ctx.drawImage(require('@/static/CanvarsImg.png'), that.imgList.imgWidth * 0.52, that.imgList.imgHeight *
|
||
0.72, that.imgList.imgWidth * 0.46, that.imgList.imgHeight * 0.22); //画一个图片底图（路径，位置，大小）
|
||
ctx.setFillStyle('#FFFFFF'); // 文字颜色
|
||
ctx.setFontSize(25); // 文字字号
|
||
ctx.fillText('详情', that.imgList.imgWidth * 0.73, that.imgList.imgHeight * 0.755); // 绘制文字
|
||
ctx.setFillStyle('#000000'); // 文字颜色
|
||
ctx.fillText('负责人：' + (that.imgList.name ? that.imgList.name : '暂无'), that.imgList.imgWidth * 0.56, that.imgList.imgHeight * 0.8); // 绘制文字
|
||
ctx.fillText('班 组：' + (that.imgList.team ? that.imgList.team : '暂无'), that.imgList.imgWidth * 0.56, that.imgList.imgHeight * 0.825); // 绘制文字
|
||
ctx.fillText('天 气：'+'晴', that.imgList.imgWidth * 0.56, that.imgList.imgHeight * 0.85); // 绘制文字
|
||
ctx.fillText('拍摄时间：'+that.date, that.imgList.imgWidth * 0.56, that.imgList.imgHeight * 0.875); // 绘制文字
|
||
ctx.fillText('地 点：'+'福永意库9栋201', that.imgList.imgWidth * 0.56, that.imgList.imgHeight * 0.9); // 绘制文字
|
||
ctx.draw(false, () => {
|
||
// canvas画布转成图片并返回图片地址
|
||
uni.canvasToTempFilePath({
|
||
canvasId: 'myCanvas',
|
||
width: that.imgList.imgWidth,
|
||
height: that.imgList.imgHeight,
|
||
destWidth: that.imgList.imgWidth,
|
||
destHeight: that.imgList.imgHeight,
|
||
fileType:'png',
|
||
success: res => {
|
||
console.log(res.tempFilePath,'res.tempFilePath')
|
||
that.imgUrl = res.tempFilePath;
|
||
that.showShareImg = true;
|
||
uni.showToast({
|
||
title: '绘制成功'
|
||
});
|
||
that.$emit('imgUrl', that.imgUrl)
|
||
},
|
||
fail: err => {
|
||
uni.showToast({
|
||
title: '绘制失败'
|
||
});
|
||
},
|
||
complete: () => {
|
||
uni.hideLoading();
|
||
uni.hideToast();
|
||
}
|
||
}, );
|
||
});
|
||
},
|
||
getPosition() {
|
||
console.log("正在获取当前位置啦")
|
||
const that = this;
|
||
uni.getLocation({
|
||
type: 'wgs84',
|
||
success: function(lb) {
|
||
console.log("位置信息", lb);
|
||
console.log('当前位置的经度：' + lb.longitude);
|
||
console.log('当前位置的纬度：' + lb.latitude);
|
||
// that.latitude = lb.latitude;
|
||
// that.longitude = lb.longitude;
|
||
// console.log(lb.longitude, lb.latitude);
|
||
|
||
let key = '56c91fb2683e5bf0f46014ac200d4c1b'; //高德地图key
|
||
uni.request({
|
||
// 高德
|
||
url: 'https://restapi.amap.com/v3/geocode/regeo?output=json&location=' +
|
||
lb.longitude + ',' + lb.latitude + '&key=' + key +
|
||
'&radius=1000&extensions=all',
|
||
data: {},
|
||
header: {
|
||
'Content-Type': 'application/json',
|
||
'Access-Control-Allow-Origin': '*'
|
||
},
|
||
success: function(res) {
|
||
console.log('高德地图API接口返回信息', res)
|
||
},
|
||
})
|
||
},
|
||
})
|
||
},
|
||
dateFormat(time) {
|
||
let date = new Date(time);
|
||
let year = date.getFullYear();
|
||
// 在日期格式中，月份是从0开始的，因此要加0，使用三元表达式在小于10的前面加0，以达到格式统一 如 09:11:05
|
||
let month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
|
||
let day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
|
||
let hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
|
||
let minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
|
||
let seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
|
||
// 拼接
|
||
return year + "年" + month + "月" + day + "日" + hours + ":" + minutes + ":" + seconds;
|
||
// return year + "-" + month + "-" + day;
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
</style>
|