2018-01-28 23:47:26 -08:00
|
|
|
const StillImage = {
|
|
|
|
props: [
|
|
|
|
'src',
|
|
|
|
'referrerpolicy',
|
2019-02-02 11:11:36 -08:00
|
|
|
'mimetype',
|
2019-10-18 13:04:17 -07:00
|
|
|
'imageLoadError',
|
2019-02-17 21:03:26 -08:00
|
|
|
'imageLoadHandler',
|
|
|
|
'alt'
|
2018-01-28 23:47:26 -08:00
|
|
|
],
|
2018-03-11 16:31:33 -07:00
|
|
|
data () {
|
|
|
|
return {
|
2019-10-06 13:28:30 -07:00
|
|
|
stopGifs: this.$store.getters.mergedConfig.stopGifs
|
2018-03-11 16:31:33 -07:00
|
|
|
}
|
|
|
|
},
|
2018-01-28 23:47:26 -08:00
|
|
|
computed: {
|
2018-02-03 09:32:13 -08:00
|
|
|
animated () {
|
2018-03-11 16:31:33 -07:00
|
|
|
return this.stopGifs && (this.mimetype === 'image/gif' || this.src.endsWith('.gif'))
|
2018-01-28 23:47:26 -08:00
|
|
|
}
|
|
|
|
},
|
|
|
|
methods: {
|
2018-02-03 08:55:45 -08:00
|
|
|
onLoad () {
|
2020-09-29 03:18:37 -07:00
|
|
|
const image = this.$refs.src
|
|
|
|
if (!image) return
|
|
|
|
this.imageLoadHandler && this.imageLoadHandler(image)
|
2018-01-28 23:47:26 -08:00
|
|
|
const canvas = this.$refs.canvas
|
|
|
|
if (!canvas) return
|
2020-09-29 03:18:37 -07:00
|
|
|
const width = image.naturalWidth
|
|
|
|
const height = image.naturalHeight
|
2018-08-27 12:40:30 -07:00
|
|
|
canvas.width = width
|
|
|
|
canvas.height = height
|
2020-09-29 03:18:37 -07:00
|
|
|
canvas.getContext('2d').drawImage(image, 0, 0, width, height)
|
2019-02-05 07:17:50 -08:00
|
|
|
},
|
|
|
|
onError () {
|
|
|
|
this.imageLoadError && this.imageLoadError()
|
2018-01-28 23:47:26 -08:00
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
export default StillImage
|