OpenWebUI/open-webui
1
0
Fork 0
mirror of https://github.com/open-webui/open-webui synced 2025-06-23 02:16:52 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

fix: image preview/download

Browse Source
This commit is contained in:
Timothy Jaeryang Baek 2025-05-28 15:57:40 +04:00
parent 8a74bdce37
commit 32135a29bb
1 changed files with 44 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

71
src/lib/components/common/ImagePreview.svelte
View File

@ -2,6 +2,9 @@
import { onDestroy, onMount } from 'svelte';
import panzoom, { type PanZoom } from 'panzoom';
import fileSaver from 'file-saver';
const { saveAs } = fileSaver;
export let show = false;
export let src = '';
export let alt = '';
@ -29,22 +32,6 @@
console.log(instance.getTransform());
};
const downloadImage = (url, filename, prefixName = '') => {
fetch(url)
.then((response) => response.blob())
.then((blob) => {
const objectUrl = window.URL.createObjectURL(blob);
const link = document.createElement('a');
link.href = objectUrl;
link.download = `${prefixName}${filename}`;
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
window.URL.revokeObjectURL(objectUrl);
})
.catch((error) => console.error('Error downloading image:', error));
};
const handleKeyDown = (event: KeyboardEvent) => {
if (event.key === 'Escape') {
console.log('Escape');
@ -82,7 +69,7 @@
bind:this={previewElement}
class="modal fixed top-0 right-0 left-0 bottom-0 bg-black text-white w-full min-h-screen h-screen flex justify-center z-9999 overflow-hidden overscroll-contain"
>
<div class=" absolute left-0 w-full flex justify-between select-none z-10">
<div class=" absolute left-0 w-full flex justify-between select-none z-20">
<div>
<button
class=" p-5"
@ -110,14 +97,38 @@
<div>
<button
class=" p-5"
on:pointerdown={(e) => {
e.stopImmediatePropagation();
e.preventDefault();
downloadImage(src, src.substring(src.lastIndexOf('/') + 1), alt);
}}
on:click={(e) => {
downloadImage(src, src.substring(src.lastIndexOf('/') + 1), alt);
class=" p-5 z-999"
on:click={() => {
if (src.startsWith('data:image/')) {
const base64Data = src.split(',')[1];
const blob = new Blob([Uint8Array.from(atob(base64Data), (c) => c.charCodeAt(0))], {
type: 'image/png'
});
saveAs(blob, alt || 'download.png');
return;
} else if (src.startsWith('blob:')) {
// Handle blob URLs
fetch(src)
.then((response) => response.blob())
.then((blob) => {
saveAs(blob, alt || 'download.png');
})
.catch((error) => {
console.error('Error downloading blob:', error);
});
return;
} else if (src.startsWith('http://') || src.startsWith('https://')) {
// Handle remote URLs
fetch(src)
.then((response) => response.blob())
.then((blob) => {
saveAs(blob, alt || 'download.png');
})
.catch((error) => {
console.error('Error downloading remote image:', error);
});
return;
}
}}
>
<svg
@ -136,8 +147,14 @@
</button>
</div>
</div>
<div bind:this={sceneElement} class="flex h-full max-h-full justify-center items-center">
<img {src} {alt} class=" mx-auto h-full object-scale-down select-none" draggable="false" />
<div class="flex h-full max-h-full justify-center items-center z-0">
<img
bind:this={sceneElement}
{src}
{alt}
class=" mx-auto h-full object-scale-down select-none"
draggable="false"
/>
</div>
</div>
{/if}