Skip to content

Commit 90ca9d8

Browse files
halamix2halamix2
committedJun 22, 2024
better image loading
·
0.4.00.2.0
1 parent c0c0b19 commit 90ca9d8

File tree

7 files changed

+85
-75
lines changed

7 files changed

+85
-75
lines changed
 

‎.env

+1
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ VITE_LOGO_FIRST=assets/logo_gsps/2024.png
22
VITE_LOGO_SECOND=assets/logo_fundacja/logo_fundacja_ITAKA.png
33

44
VITE_IMAGES_BANNER_RUNNER=assets/banners/runner.png
5+
#VITE_IMAGES_BANNER_RUNNER=assets/banners_runner_dzieciom2024.png
56
#VITE_IMAGES_BANNER_MILESTONE=assets/banners/milestone.png
67
VITE_IMAGES_BANNER_MILESTONE=assets/banner_milestone_dzieciom2024.png
78
#VITE_IMAGES_BANNER_YOUTUBE=assets/banners/youtube.png

‎src/components/CanvasItem.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,7 @@ function canvasMouseDown(e: MouseEvent) {
5555
}
5656
5757
function windowMouseUp(e: MouseEvent) {
58-
if ((e.buttons & 1) == 0) {
58+
if (canvasModel.value != null && (e.buttons & 1) == 0) {
5959
canvasDragged.value = false
6060
sumX.value = 0
6161
sumY.value = 0

‎src/components/RunnerItem.vue

+13-12
Original file line numberDiff line numberDiff line change
@@ -113,8 +113,9 @@ function updateMoney() {
113113
type="file"
114114
name="background"
115115
id="background"
116-
accept="image/png, image/jpeg, image/bmp"
117-
prepend-icon="photo_camera"
116+
accept="image/*"
117+
prepend-inner-icon="photo_camera"
118+
prepend-icon=""
118119
/>
119120
</div>
120121
<div>
@@ -125,10 +126,10 @@ function updateMoney() {
125126
type="text"
126127
name="runner"
127128
id="runner"
128-
placeholder="Runner"
129+
label="Runner"
129130
size="42"
130131
required
131-
prepend-icon="person"
132+
prepend-inner-icon="person"
132133
/>
133134
</div>
134135
<div>
@@ -138,10 +139,10 @@ function updateMoney() {
138139
type="text"
139140
name="title"
140141
id="title"
141-
placeholder="Tytuł"
142+
label="Tytuł"
142143
size="42"
143144
required
144-
prepend-icon="uppercase"
145+
prepend-inner-icon="uppercase"
145146
/>
146147
</div>
147148
<div>
@@ -152,8 +153,8 @@ function updateMoney() {
152153
name="subtitle"
153154
id="subtitle"
154155
size="42"
155-
placeholder="Podtytuł (opcjonalne)"
156-
prepend-icon="lowercase"
156+
label="Podtytuł (opcjonalne)"
157+
prepend-inner-icon="lowercase"
157158
/>
158159
</div>
159160
<div>
@@ -163,10 +164,10 @@ function updateMoney() {
163164
type="text"
164165
name="category"
165166
id="category"
166-
placeholder="Kategoria"
167+
label="Kategoria"
167168
size="42"
168169
required
169-
prepend-icon="category"
170+
prepend-inner-icon="category"
170171
/>
171172
</div>
172173

@@ -181,7 +182,7 @@ function updateMoney() {
181182
placeholder="12:34"
182183
size="12"
183184
required
184-
prepend-icon="schedule"
185+
prepend-inner-icon="schedule"
185186
/>
186187
</div>
187188
<div v-if="enableMoney">
@@ -195,7 +196,7 @@ function updateMoney() {
195196
placeholder="0"
196197
size="10"
197198
required
198-
prepend-icon="paid"
199+
prepend-inner-icon="paid"
199200
/>
200201
<!-- TODO update from the internet -->
201202
<v-btn @click.prevent="updateMoney">Aktualizuj</v-btn>

‎src/utils/loadImage.ts

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
export function loadImage(url: URL, onloadFunc: () => void): Promise<HTMLImageElement> {
2+
return new Promise((resolve, reject) => {
3+
const image = new Image()
4+
image.onload = onloadFunc
5+
image.onerror = reject
6+
image.src = url.href
7+
resolve(image)
8+
})
9+
}

‎src/views/PhotoView.vue

+19-20
Original file line numberDiff line numberDiff line change
@@ -6,14 +6,7 @@ import CanvasItem from '../components/CanvasItem.vue'
66
import RunnerItem from '../components/RunnerItem.vue'
77
import { useRoute } from 'vue-router'
88
9-
const imageBannerData = new URL(
10-
'../' + import.meta.env.VITE_IMAGES_BANNER_MILESTONE_OLD,
11-
import.meta.url
12-
).href
13-
const imageGradientData = new URL('../' + import.meta.env.VITE_IMAGES_GRADIENT, import.meta.url)
14-
.href
15-
// import imageLogoGSPSData from '../assets/logo_gsps/dzieciom2024.png'
16-
// import imageLogoFoundationData from '../assets/logo_fundacja/na_ratunek.png'
9+
import { loadImage } from '../utils/loadImage'
1710
1811
const route = useRoute()
1912
const canvasWidth = ref(1500)
@@ -51,21 +44,27 @@ const initialSubtitle = ref('')
5144
const initialCategory = ref('')
5245
const initialMoney = ref(0)
5346
54-
var imageBanner = new Image()
55-
imageBanner.onload = () => redrawThumbnail()
56-
imageBanner.src = imageBannerData
47+
var imageBanner = await loadImage(
48+
new URL('../' + import.meta.env.VITE_IMAGES_BANNER_MILESTONE, import.meta.url),
49+
redrawThumbnail
50+
)
5751
58-
var imageGradient = new Image()
59-
imageGradient.onload = () => redrawThumbnail()
60-
imageGradient.src = imageGradientData
52+
// imageBanner.src = imageBannerData
6153
62-
// var imageLogoGSPS = new Image()
63-
// imageLogoGSPS.onload = () => redrawThumbnail()
64-
// imageLogoGSPS.src = imageLogoGSPSData
54+
var imageGradient = await loadImage(
55+
new URL('../' + import.meta.env.VITE_IMAGES_GRADIENT, import.meta.url),
56+
redrawThumbnail
57+
)
6558
66-
// var imageLogoFoundation = new Image()
67-
// imageLogoFoundation.onload = () => redrawThumbnail()
68-
// imageLogoFoundation.src = imageLogoFoundationData
59+
var imageLogoGSPS = await loadImage(
60+
new URL('../' + import.meta.env.VITE_LOGO_FIRST, import.meta.url),
61+
redrawThumbnail
62+
)
63+
64+
var imageLogoFoundation = await loadImage(
65+
new URL('../' + import.meta.env.VITE_LOGO_SECOND, import.meta.url),
66+
redrawThumbnail
67+
)
6968
7069
function redrawThumbnail() {
7170
// TODO: add a check to see if the canvas is already loaded

‎src/views/RunnerView.vue

+21-20
Original file line numberDiff line numberDiff line change
@@ -6,13 +6,7 @@ import CanvasItem from '../components/CanvasItem.vue'
66
import RunnerItem from '../components/RunnerItem.vue'
77
import { useRoute } from 'vue-router'
88
9-
const imageBannerData = new URL('../' + import.meta.env.VITE_IMAGES_BANNER_RUNNER, import.meta.url)
10-
.href
11-
const imageGradientData = new URL('../' + import.meta.env.VITE_IMAGES_GRADIENT, import.meta.url)
12-
.href
13-
const imageLogoGSPSData = new URL('../' + import.meta.env.VITE_LOGO_FIRST, import.meta.url).href
14-
const imageLogoFoundationData = new URL('../' + import.meta.env.VITE_LOGO_SECOND, import.meta.url)
15-
.href
9+
import { loadImage } from '../utils/loadImage'
1610
1711
const route = useRoute()
1812
const canvasWidth = ref(1500)
@@ -50,21 +44,27 @@ const initialSubtitle = ref('')
5044
const initialCategory = ref('')
5145
const initialMoney = ref(0)
5246
53-
var imageBanner = new Image()
54-
imageBanner.onload = () => redrawThumbnail()
55-
imageBanner.src = imageBannerData
47+
var imageBanner = await loadImage(
48+
new URL('../' + import.meta.env.VITE_IMAGES_BANNER_RUNNER, import.meta.url),
49+
redrawThumbnail
50+
)
5651
57-
var imageGradient = new Image()
58-
imageGradient.onload = () => redrawThumbnail()
59-
imageGradient.src = imageGradientData
52+
// imageBanner.src = imageBannerData
6053
61-
var imageLogoGSPS = new Image()
62-
imageLogoGSPS.onload = () => redrawThumbnail()
63-
imageLogoGSPS.src = imageLogoGSPSData
54+
var imageGradient = await loadImage(
55+
new URL('../' + import.meta.env.VITE_IMAGES_GRADIENT, import.meta.url),
56+
redrawThumbnail
57+
)
6458
65-
var imageLogoFoundation = new Image()
66-
imageLogoFoundation.onload = () => redrawThumbnail()
67-
imageLogoFoundation.src = imageLogoFoundationData
59+
var imageLogoGSPS = await loadImage(
60+
new URL('../' + import.meta.env.VITE_LOGO_FIRST, import.meta.url),
61+
redrawThumbnail
62+
)
63+
64+
var imageLogoFoundation = await loadImage(
65+
new URL('../' + import.meta.env.VITE_LOGO_SECOND, import.meta.url),
66+
redrawThumbnail
67+
)
6868
6969
function redrawThumbnail() {
7070
// TODO: add a check to see if the canvas is already loaded
@@ -134,7 +134,8 @@ function redrawThumbnail() {
134134
ctx.strokeText(category.value, canvasWidth.value / 2, 887 + 42, canvasWidth.value)
135135
ctx.fillText(category.value, canvasWidth.value / 2, 887 + 42, canvasWidth.value)
136136
137-
ctx.drawImage(imageLogoGSPS, 16, 17)
137+
// TODO: separate drawRescaled or sth func
138+
ctx.drawImage(imageLogoGSPS, 16, 17, 317, 113)
138139
139140
ctx.drawImage(imageLogoFoundation, 16, 734 - 17)
140141

‎src/views/YoutubeView.vue

+21-22
Original file line numberDiff line numberDiff line change
@@ -6,14 +6,7 @@ import CanvasItem from '../components/CanvasItem.vue'
66
import RunnerItem from '../components/RunnerItem.vue'
77
import { useRoute } from 'vue-router'
88
9-
const imageBannerData = new URL(
10-
'../' + import.meta.env.VITE_IMAGES_BANNER_YOUTUBE_OLD,
11-
import.meta.url
12-
).href
13-
const imageGradientData = new URL('../' + import.meta.env.VITE_IMAGES_GRADIENT, import.meta.url)
14-
.href
15-
//import imageLogoGSPSData from '../assets/logo_gsps/dzieciom2024.png'
16-
// import imageLogoFoundationData from '../assets/logo_fundacja/na_ratunek.png'
9+
import { loadImage } from '../utils/loadImage'
1710
1811
const route = useRoute()
1912
const canvasWidth = ref(1280)
@@ -51,21 +44,27 @@ const initialSubtitle = ref('')
5144
const initialCategory = ref('')
5245
const initialTime = ref('')
5346
54-
var imageBanner = new Image()
55-
imageBanner.onload = () => redrawThumbnail()
56-
imageBanner.src = imageBannerData
47+
var imageBanner = await loadImage(
48+
new URL('../' + import.meta.env.VITE_IMAGES_BANNER_YOUTUBE, import.meta.url),
49+
redrawThumbnail
50+
)
5751
58-
var imageGradient = new Image()
59-
imageGradient.onload = () => redrawThumbnail()
60-
imageGradient.src = imageGradientData
52+
// imageBanner.src = imageBannerData
6153
62-
// var imageLogoGSPS = new Image()
63-
// imageLogoGSPS.onload = () => redrawThumbnail()
64-
// imageLogoGSPS.src = imageLogoGSPSData
54+
var imageGradient = await loadImage(
55+
new URL('../' + import.meta.env.VITE_IMAGES_GRADIENT, import.meta.url),
56+
redrawThumbnail
57+
)
6558
66-
// var imageLogoFoundation = new Image()
67-
// imageLogoFoundation.onload = () => redrawThumbnail()
68-
// imageLogoFoundation.src = imageLogoFoundationData
59+
var imageLogoGSPS = await loadImage(
60+
new URL('../' + import.meta.env.VITE_LOGO_FIRST, import.meta.url),
61+
redrawThumbnail
62+
)
63+
64+
var imageLogoFoundation = await loadImage(
65+
new URL('../' + import.meta.env.VITE_LOGO_SECOND, import.meta.url),
66+
redrawThumbnail
67+
)
6968
7069
function redrawThumbnail() {
7170
// TODO: add a check to see if the canvas is already loaded
@@ -136,9 +135,9 @@ function redrawThumbnail() {
136135
ctx.strokeText(category.value, rightSide, categoryPosition + 62, canvasWidth.value)
137136
ctx.fillText(category.value, rightSide, categoryPosition + 62, canvasWidth.value)
138137
139-
// ctx.drawImage(imageLogoGSPS, 16, 17)
138+
ctx.drawImage(imageLogoGSPS, 16, 17)
140139
141-
// ctx.drawImage(imageLogoFoundation, 16, 734 - 17)
140+
ctx.drawImage(imageLogoFoundation, 16, 734 - 17)
142141
143142
// time 158 Saira Condensed, Ultra-Bold Condensed
144143
ctx.font = 'normal normal 800 158px Saira Condensed'

0 commit comments

Comments
 (0)
Please sign in to comment.