c3lf/c3lf-system-3
9
0
Fork 0
Code Issues 55 Pull requests Projects 2 Releases Wiki Activity Actions

software caching thumbnails in javascript

Browse source
This commit is contained in:
j3d1 2024-06-22 22:11:38 +02:00
parent facefc1cc7
commit e91b64ca97
5 changed files with 54 additions and 18 deletions
Download patch file Download diff file Expand all files Collapse all files

37
web/src/components/AuthenticatedImage.vue
View file

@ -7,7 +7,7 @@
<script>
import {mapActions} from "vuex";
import {mapActions, mapGetters, mapMutations} from "vuex";
export default {
name: "AuthenticatedImage",
@ -16,6 +16,7 @@ export default {
type: String,
required: true
},
cached: Boolean
},
data() {
return {
@ -23,21 +24,37 @@ export default {
servers: []
}
},
computed: {
...mapGetters(['getThumbnail']),
},
methods: {
...mapActions(['fetchImage']),
loadImage() {
this.fetchImage(this.src).then((response) => {
const mime_type = response.headers.get("content-type");
response.arrayBuffer().then((buf) => {
const base64 = btoa(new Uint8Array(buf)
.reduce((data, byte) => data + String.fromCharCode(byte), ""));
this.image_data = "data:" + mime_type + ";base64," + base64;
...mapMutations(['setThumbnail']),
async loadImage() {
const response = await this.fetchImage(this.src);
const mime_type = response.headers.get("content-type");
const buf = await response.arrayBuffer();
const base64 = btoa(new Uint8Array(buf)
.reduce((data, byte) => data + String.fromCharCode(byte), ""));
this.image_data = "data:" + mime_type + ";base64," + base64;
if (this.cached)
this.setThumbnail({
url: this.src,
data: this.image_data
});
})
}
},
mounted() {
this.loadImage();
setTimeout(() => {
if (this.cached) {
const c = this.getThumbnail(this.src);
if (c) {
this.image_data = c;
return;
}
}
this.loadImage();
}, 0);
}
}
</script>