2018-01-29 07:47:26 +00:00
|
|
|
const StillImage = {
|
|
|
|
props: [
|
|
|
|
'src',
|
|
|
|
'referrerpolicy',
|
2019-02-02 19:11:36 +00:00
|
|
|
'mimetype',
|
2019-10-18 20:04:17 +00:00
|
|
|
'imageLoadError',
|
2019-02-18 05:03:26 +00:00
|
|
|
'imageLoadHandler',
|
2022-02-03 20:50:32 +00:00
|
|
|
'alt',
|
|
|
|
'height',
|
|
|
|
'width'
|
2018-01-29 07:47:26 +00:00
|
|
|
],
|
2018-03-11 23:31:33 +00:00
|
|
|
data () {
|
|
|
|
return {
|
2022-09-23 10:27:14 +00:00
|
|
|
stopGifs: this.$store.getters.mergedConfig.stopGifs,
|
2023-07-20 23:14:36 +00:00
|
|
|
isAnimated: false,
|
2023-07-20 23:26:52 +00:00
|
|
|
prefersReducedMotion: true
|
2018-03-11 23:31:33 +00:00
|
|
|
}
|
|
|
|
},
|
2023-07-20 23:14:36 +00:00
|
|
|
created () {
|
|
|
|
this.prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches
|
|
|
|
},
|
2018-01-29 07:47:26 +00:00
|
|
|
computed: {
|
2018-02-03 17:32:13 +00:00
|
|
|
animated () {
|
2023-07-20 23:14:36 +00:00
|
|
|
return this.stopGifs && this.isAnimated && this.prefersReducedMotion
|
2022-02-03 20:50:32 +00:00
|
|
|
},
|
|
|
|
style () {
|
|
|
|
const appendPx = (str) => /\d$/.test(str) ? str + 'px' : str
|
|
|
|
return {
|
|
|
|
height: this.height ? appendPx(this.height) : null,
|
|
|
|
width: this.width ? appendPx(this.width) : null
|
|
|
|
}
|
2018-01-29 07:47:26 +00:00
|
|
|
}
|
|
|
|
},
|
|
|
|
methods: {
|
2018-02-03 16:55:45 +00:00
|
|
|
onLoad () {
|
2020-09-29 10:18:37 +00:00
|
|
|
const image = this.$refs.src
|
|
|
|
if (!image) return
|
|
|
|
this.imageLoadHandler && this.imageLoadHandler(image)
|
2022-09-23 10:27:14 +00:00
|
|
|
this.detectAnimation(image)
|
|
|
|
this.drawThumbnail()
|
|
|
|
},
|
|
|
|
onError () {
|
|
|
|
this.imageLoadError && this.imageLoadError()
|
|
|
|
},
|
|
|
|
detectAnimation (image) {
|
|
|
|
if (this.mimetype === 'image/gif' || this.src.endsWith('.gif')) {
|
|
|
|
this.isAnimated = true
|
|
|
|
return
|
|
|
|
}
|
|
|
|
// harmless CORS errors without-- clean console with
|
|
|
|
if (!this.$store.state.instance.mediaProxyAvailable) return
|
|
|
|
// Animated JPEGs?
|
|
|
|
if (!(this.src.endsWith('.webp') || this.src.endsWith('.png'))) return
|
|
|
|
// Browser Cache should ensure image doesn't get loaded twice if cache exists
|
|
|
|
fetch(image.src, {
|
|
|
|
referrerPolicy: 'same-origin'
|
|
|
|
})
|
|
|
|
.then(data => {
|
|
|
|
// We don't need to read the whole file so only call it once
|
|
|
|
data.body.getReader().read()
|
|
|
|
.then(reader => {
|
|
|
|
if (this.src.endsWith('.webp') && this.isAnimatedWEBP(reader.value)) {
|
|
|
|
this.isAnimated = true
|
|
|
|
return
|
|
|
|
}
|
|
|
|
if (this.src.endsWith('.png') && this.isAnimatedPNG(reader.value)) {
|
|
|
|
this.isAnimated = true
|
|
|
|
}
|
|
|
|
})
|
|
|
|
})
|
|
|
|
.catch(() => {
|
|
|
|
// this.imageLoadError && this.imageLoadError()
|
|
|
|
})
|
|
|
|
},
|
|
|
|
isAnimatedWEBP (data) {
|
|
|
|
/**
|
|
|
|
* WEBP HEADER CHUNK
|
|
|
|
* === START HEADER ===
|
|
|
|
* 82 73 70 70 ("RIFF")
|
|
|
|
* xx xx xx xx (SIZE)
|
|
|
|
* 87 69 66 80 ("WEBP")
|
|
|
|
* === END OF HEADER ===
|
|
|
|
* 86 80 56 88 ("VP8X") ← Extended VP8X
|
|
|
|
* xx xx xx xx (VP8X)
|
|
|
|
* [++] ← RSVILEX(A)R (1 byte)
|
|
|
|
* A → Animated bit
|
|
|
|
*/
|
|
|
|
// Relevant bytes
|
|
|
|
const segment = data.slice(4 * 3, (4 * 5) + 1)
|
|
|
|
// Check for VP8X string
|
|
|
|
if (segment.join('').includes(['86805688'])) {
|
|
|
|
// Check for Animation bit
|
|
|
|
return !!((segment[8] >> 1) & 1)
|
|
|
|
}
|
|
|
|
// No VP8X = Not Animated (X is for Extended)
|
|
|
|
return false
|
|
|
|
},
|
|
|
|
isAnimatedPNG (data) {
|
|
|
|
// Find acTL before IDAT in PNG; if found it is animated
|
|
|
|
const segment = []
|
|
|
|
for (let i = 0; i < data.length; i++) {
|
|
|
|
segment.push(String.fromCharCode(data[i]))
|
|
|
|
}
|
|
|
|
const str = segment.join('')
|
|
|
|
const idatPos = str.indexOf('IDAT')
|
|
|
|
return (str.substring(0, idatPos > 0 ? idatPos : 0).indexOf('acTL') > 0)
|
|
|
|
},
|
|
|
|
drawThumbnail () {
|
2018-01-29 07:47:26 +00:00
|
|
|
const canvas = this.$refs.canvas
|
2022-09-23 10:27:14 +00:00
|
|
|
if (!this.$refs.canvas) return
|
|
|
|
const image = this.$refs.src
|
2020-09-29 10:18:37 +00:00
|
|
|
const width = image.naturalWidth
|
|
|
|
const height = image.naturalHeight
|
2018-08-27 19:40:30 +00:00
|
|
|
canvas.width = width
|
|
|
|
canvas.height = height
|
2020-09-29 10:18:37 +00:00
|
|
|
canvas.getContext('2d').drawImage(image, 0, 0, width, height)
|
2018-01-29 07:47:26 +00:00
|
|
|
}
|
2022-09-23 10:27:14 +00:00
|
|
|
},
|
|
|
|
updated () {
|
|
|
|
// On computed animated change
|
|
|
|
this.drawThumbnail()
|
2018-01-29 07:47:26 +00:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
export default StillImage
|