1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
|
import { displayElementImageURL, galleryFullsizeImageURLS } from 'app/utils/annotation.utils'
export const preloadSectionImages = (section, mediaLookup) => {
// console.log(section)
let urls = []
section.fullscreenTimeline.forEach(element => {
// console.log(element)
const mediaItem = mediaLookup[element.settings.media_id]
if (!mediaItem) return
// console.log(mediaItem)
switch (mediaItem.type) {
case 'image':
urls.push(displayElementImageURL(element, mediaItem))
break
case 'gallery':
urls = urls.concat(galleryFullsizeImageURLS(mediaItem))
break
}
})
return preloadImages(urls)
}
export const preloadImages = urls => batchPromise(urls, 4, preloadImage)
export const batchPromise = (list, count, fn) => {
// console.log(list, count, fn)
let cancelled = false
const promise = new Promise((resolve, reject) => {
let index = 0
let len = list.length
const worker = j => (
new Promise(resolveWorker => {
const next = () => {
const i = index++
if (cancelled || i >= len) {
return resolveWorker()
}
const item = list[i]
// console.log(['worker', j, '=>', i, item].join(' '))
fn(item)
.then(next)
.catch(err => {
console.error(err, item)
next()
})
}
next()
})
)
const workers = []
for (let j = 0; j < count; j++) {
workers.push(worker(j))
}
Promise.all(workers)
.then(resolve)
.catch(reject)
})
const cancel = () => cancelled = true
return {
promise, cancel
}
}
const preloadedImageCache = {}
export const preloadImage = (url, anonymous=false) => (
new Promise((resolve, reject) => {
if (!url || preloadedImageCache[url] || typeof url === 'object' && url instanceof Image) {
return resolve(url)
}
// console.log('preload', url)
preloadedImageCache[url] = true
const image = new Image()
let loaded = false
image.onload = () => {
if (loaded) return
loaded = true
image.onload = null
image.onerror = null
resolve(image)
}
image.onerror = () => {
if (loaded) return
image.onload = null
image.onerror = null
reject(image)
}
// console.log(img.src)
if (anonymous) {
image.crossOrigin = 'anonymous'
}
image.src = url
if (image.complete) {
image.onload()
}
})
)
export const cropImage = (url, crop, maxSide) => {
return new Promise((resolve, reject) => {
preloadImage(url, true)
.then(image => {
let { x, y, w, h } = crop
x = parseFloat(x)
y = parseFloat(y)
w = parseFloat(w)
h = parseFloat(h)
const canvas = document.createElement('canvas')
const ctx = canvas.getContext('2d')
const { naturalWidth, naturalHeight } = image
let width, height
let cropWidth = naturalWidth * w
let cropHeight = naturalHeight * h
if (maxSide > 0) {
if (cropWidth > cropHeight) {
width = Math.min(maxSide, cropWidth)
height = cropHeight * width / cropWidth
} else {
height = Math.min(maxSide, cropHeight)
width = cropWidth * height / cropHeight
}
} else {
width = cropWidth
height = cropHeight
}
canvas.width = width
canvas.height = height
ctx.drawImage(
image,
Math.round(x * naturalWidth),
Math.round(y * naturalHeight),
Math.round(w * naturalWidth),
Math.round(h * naturalHeight),
0, 0, canvas.width, canvas.height
)
// console.log(x, y, w, h)
// console.log(naturalWidth, naturalHeight)
// console.log(width, height)
resolve(canvas)
})
})
}
|
