|
@@ -3,7 +3,7 @@
|
|
|
class="carousel-item"
|
|
|
:src="watermark || base_img_url2 + photo.filename + resize"
|
|
|
>
|
|
|
- <img v-if="Math.abs(current - index) < 3" crossorigin="anonymous" @load="drawWatermark($event,photo.markText)" loading="lazy" :src="watermark || (base_img_url2 + (photo.resFilename ? photo.resFilename : photo.filename) + resize)" style="width: 100%;" />
|
|
|
+ <img v-if="Math.abs(current - index) < 3" crossorigin="anonymous" @load="drawWatermark($event)" loading="lazy" :src="watermark || (base_img_url2 + (photo.resFilename ? photo.resFilename : photo.filename) + resize)" style="width: 100%;" />
|
|
|
<canvas ref="canvasRef" style="position: absolute;"></canvas>
|
|
|
<div class="tag-text" v-if="showTagBox" >
|
|
|
<span v-html="photo.growText"></span>
|
|
@@ -20,11 +20,16 @@ import { ref, onMounted, onBeforeUnmount, defineProps } from "vue";
|
|
|
import { base_img_url2 } from "@/api/config";
|
|
|
import {imageCache} from "./cacheImg.js"
|
|
|
import {dateFormat} from "@/utils/date_util.js"
|
|
|
-const resize = "?x-oss-process=image/resize,p_80/format,webp/quality,q_40";
|
|
|
+const resize = "?x-oss-process=image/resize,p_30/format,webp/quality,q_40";
|
|
|
+
|
|
|
const canvasRef = ref(null);
|
|
|
const watermark = ref(null)
|
|
|
|
|
|
const props = defineProps({
|
|
|
+ farmId:{
|
|
|
+ type: [Number,String],
|
|
|
+ required: true
|
|
|
+ },
|
|
|
photo:{
|
|
|
type: Object,
|
|
|
required: true
|
|
@@ -42,24 +47,35 @@ const props = defineProps({
|
|
|
required: true
|
|
|
}
|
|
|
})
|
|
|
-
|
|
|
-function drawWatermark(event, markText) {
|
|
|
- // console.log("markText:"+markText)
|
|
|
- if(!watermark.value && markText){
|
|
|
- let obj = JSON.parse(markText)
|
|
|
- const img = event.target;
|
|
|
- const canvas = canvasRef.value;
|
|
|
- let scale = 3
|
|
|
- canvas.width = img.width * scale;
|
|
|
- canvas.height = img.height * scale;
|
|
|
- const ctx = canvas.getContext('2d');
|
|
|
- ctx.scale(scale, scale)
|
|
|
- ctx.drawImage(img, 0, 0, img.width, img.height);
|
|
|
- drawBottom(ctx, img.width, img.height)
|
|
|
- watermark.value = canvas.toDataURL();
|
|
|
+let img = null;
|
|
|
+function drawWatermark(event) {
|
|
|
+ img = event.target
|
|
|
+ if(!watermark.value){
|
|
|
+ let param = {farmId:props.farmId, date: props.photo.uploadDate}
|
|
|
+ let weather = null
|
|
|
+ VE_API.miniimage.getByFarmIdAndDate(param).then((res)=>{
|
|
|
+ if(res.code === 0){
|
|
|
+ weather = res.data
|
|
|
+ drawWatermark2(img,weather)
|
|
|
+ }else{
|
|
|
+ drawWatermark2(img,null)
|
|
|
+ }
|
|
|
+ })
|
|
|
}
|
|
|
}
|
|
|
|
|
|
+function drawWatermark2(img,weather) {
|
|
|
+ const canvas = canvasRef.value;
|
|
|
+ let scale = 3
|
|
|
+ canvas.width = img.width * scale;
|
|
|
+ canvas.height = img.height * scale;
|
|
|
+ const ctx = canvas.getContext('2d');
|
|
|
+ ctx.scale(scale, scale)
|
|
|
+ ctx.drawImage(img, 0, 0, img.width, img.height);
|
|
|
+ drawBottom(ctx, img.width, img.height, weather)
|
|
|
+ watermark.value = canvas.toDataURL();
|
|
|
+}
|
|
|
+
|
|
|
let data = {year:props.photo.uploadDate.substring(0,4),
|
|
|
monthDay:dateFormat(new Date(props.photo.uploadDate),'mm/dd'),
|
|
|
address:props.photo.district.replaceAll("\"","") + props.photo.gardenName,
|
|
@@ -70,7 +86,22 @@ let data = {year:props.photo.uploadDate.substring(0,4),
|
|
|
shotCode:props.photo.shotCode
|
|
|
}
|
|
|
// console.log(data)
|
|
|
-const drawBottom = (ctx, imgWidth, imgHeight) => {
|
|
|
+const drawBottom = (ctx, imgWidth, imgHeight, weather) => {
|
|
|
+ if(weather){
|
|
|
+ data["temp"] = weather.tempMin+"°C"
|
|
|
+ let fushe = "光照优"
|
|
|
+ if(weather.uvIndex > 5){
|
|
|
+ fushe = "辐射过高"
|
|
|
+ }else if(weather.uvIndex < 1){
|
|
|
+ fushe = "光照差"
|
|
|
+ }
|
|
|
+ data["fushe"] = fushe
|
|
|
+ let shidu = "湿度适宜"
|
|
|
+ if(weather.humidity < 10){
|
|
|
+ shidu = "干旱缺水"
|
|
|
+ }
|
|
|
+ data["shidu"] = shidu
|
|
|
+ }
|
|
|
// 设置遮罩的高度为imgHeight的1/6
|
|
|
const maskHeight = imgHeight / 4;
|
|
|
|