feat: downscaled image previews for task attachments (#2541)

As discussed in [https://community.vikunja.io/t/add-scaled-down-images-for-image-previews](https://community.vikunja.io/t/add-scaled-down-images-for-image-previews) this adds a query parameter in the task attachment request which returns a scaled down image for preview purposes to reduce network load and improve responsiveness.

Co-authored-by: Elscrux <nickposer2102@gmail.com>
Reviewed-on: https://kolaente.dev/vikunja/vikunja/pulls/2541
Reviewed-by: konrad <k@knt.li>
Co-authored-by: Elscrux <elscrux@gmail.com>
Co-committed-by: Elscrux <elscrux@gmail.com>

frontend/src/components/tasks/partials/FilePreview.vue

@@ -20,7 +20,7 @@
 
 <script setup lang="ts">
 import {ref, shallowReactive, watchEffect} from 'vue'
-import AttachmentService from '@/services/attachment'
+import AttachmentService, {PREVIEW_SIZE} from '@/services/attachment'
 import type {IAttachment} from '@/modelTypes/IAttachment'
 import {SUPPORTED_IMAGE_SUFFIX} from '@/models/attachment'
 
@@ -33,7 +33,7 @@ const blobUrl = ref<string | undefined>(undefined)
 
 watchEffect(async () => {
 	if (props.modelValue && canPreview(props.modelValue)) {
-		blobUrl.value = await attachmentService.getBlobUrl(props.modelValue)
+		blobUrl.value = await attachmentService.getBlobUrl(props.modelValue, PREVIEW_SIZE.SM)
 	}
 })
 

frontend/src/components/tasks/partials/KanbanCard.vue

@@ -93,7 +93,7 @@
 </template>
 
 <script lang="ts" setup>
-import {ref, computed, watch} from 'vue'
+import {computed, ref, watch} from 'vue'
 import {useRouter} from 'vue-router'
 
 import PriorityLabel from '@/components/tasks/partials/PriorityLabel.vue'
@@ -105,9 +105,9 @@ import ChecklistSummary from './ChecklistSummary.vue'
 import {getHexColor} from '@/models/task'
 import type {ITask} from '@/modelTypes/ITask'
 import {SUPPORTED_IMAGE_SUFFIX} from '@/models/attachment'
-import AttachmentService from '@/services/attachment'
+import AttachmentService, {PREVIEW_SIZE} from '@/services/attachment'
 
-import {formatDateLong, formatISO, formatDateSince} from '@/helpers/time/formatDate'
+import {formatDateLong, formatDateSince, formatISO} from '@/helpers/time/formatDate'
 import {colorIsDark} from '@/helpers/color/colorIsDark'
 import {useTaskStore} from '@/stores/tasks'
 import AssigneeList from '@/components/tasks/partials/AssigneeList.vue'
@@ -165,7 +165,7 @@ async function maybeDownloadCoverImage() {
 	}
 
 	const attachmentService = new AttachmentService()
-	coverImageBlobUrl.value = await attachmentService.getBlobUrl(attachment)
+	coverImageBlobUrl.value = await attachmentService.getBlobUrl(attachment, PREVIEW_SIZE.MD)
 }
 
 watch(

frontend/src/services/attachment.ts

@@ -5,6 +5,13 @@ import type { IAttachment } from '@/modelTypes/IAttachment'
 
 import {downloadBlob} from '@/helpers/downloadBlob'
 
+export enum PREVIEW_SIZE {
+	SM = 'sm',
+	MD = 'md',
+	LG = 'lg',
+	XL = 'xl',
+}
+
 export default class AttachmentService extends AbstractService<IAttachment> {
 	constructor() {
 		super({
@@ -37,8 +44,13 @@ export default class AttachmentService extends AbstractService<IAttachment> {
 		return data
 	}
 
-	getBlobUrl(model: IAttachment) {
-		return AbstractService.prototype.getBlobUrl.call(this, '/tasks/' + model.taskId + '/attachments/' + model.id)
+	getBlobUrl(model: IAttachment, size?: PREVIEW_SIZE) {
+		let mainUrl = '/tasks/' + model.taskId + '/attachments/' + model.id
+		if (size !== undefined) {
+			mainUrl += `?preview=true&size=${size}`
+		}
+
+		return AbstractService.prototype.getBlobUrl.call(this, mainUrl)
 	}
 
 	async download(model: IAttachment) {

pkg/models/task_attachment.go

@@ -17,14 +17,21 @@
 package models
 
 import (
+	"bytes"
+	"image"
+	"image/png"
 	"io"
+	"strconv"
 	"time"
 
 	"code.vikunja.io/api/pkg/events"
-
 	"code.vikunja.io/api/pkg/files"
+	"code.vikunja.io/api/pkg/log"
+	"code.vikunja.io/api/pkg/modules/keyvalue"
 	"code.vikunja.io/api/pkg/user"
 	"code.vikunja.io/web"
+
+	"github.com/disintegration/imaging"
 	"xorm.io/xorm"
 )
 
@@ -185,6 +192,94 @@ func (ta *TaskAttachment) ReadAll(s *xorm.Session, _ web.Auth, _ string, page in
 	return attachments, len(attachments), numberOfTotalItems, err
 }
 
+func cacheKeyForTaskAttachmentPreview(id int64, size PreviewSize) string {
+	return "task_attachment_preview_" + strconv.FormatInt(id, 10) + "_size_" + string(size)
+}
+
+func (ta *TaskAttachment) GetPreviewFromCache(previewSize PreviewSize) []byte {
+	cacheKey := cacheKeyForTaskAttachmentPreview(ta.ID, previewSize)
+
+	var cached []byte
+	exists, err := keyvalue.GetWithValue(cacheKey, &cached)
+
+	// If the preview is not cached, return nil
+	if err != nil || !exists || cached == nil {
+		return nil
+	}
+
+	return cached
+}
+
+type PreviewSize string
+
+const (
+	PreviewSmall      PreviewSize = "sm"
+	PreviewMedium     PreviewSize = "md"
+	PreviewLarge      PreviewSize = "lg"
+	PreviewExtraLarge PreviewSize = "xl"
+)
+
+func (previewSize PreviewSize) GetSize() int {
+	switch previewSize {
+	case PreviewSmall:
+		return 100
+	case PreviewMedium:
+		return 200
+	case PreviewLarge:
+		return 400
+	case PreviewExtraLarge:
+		return 800
+	default:
+		return 200
+	}
+}
+
+func resize(img image.Image, size int) *image.NRGBA {
+	x := img.Bounds().Size().X
+	y := img.Bounds().Size().Y
+	heightSmaller := x > y
+	var resizedImg *image.NRGBA
+	if heightSmaller {
+		resizedImg = imaging.Resize(img, 0, size, imaging.Lanczos)
+	} else {
+		resizedImg = imaging.Resize(img, size, 0, imaging.Lanczos)
+	}
+	log.Debugf("Resized attachment image from %vx%v to %vx%v for a preview", x, y, resizedImg.Bounds().Size().X, resizedImg.Bounds().Size().Y)
+
+	return resizedImg
+}
+
+func (ta *TaskAttachment) GenerateAndSavePreviewToCache(previewSize PreviewSize) []byte {
+	img, _, err := image.Decode(ta.File.File)
+	if err != nil {
+		return nil
+	}
+
+	// Scale down the image to a minimum size
+	resizedImg := resize(img, previewSize.GetSize())
+
+	// Get the raw bytes of the resized image
+	buf := &bytes.Buffer{}
+	if err := png.Encode(buf, resizedImg); err != nil {
+		return nil
+	}
+	previewImage, err := io.ReadAll(buf)
+	if err != nil {
+		return nil
+	}
+
+	// Store the preview image in the cache
+	cacheKey := cacheKeyForTaskAttachmentPreview(ta.ID, previewSize)
+	err = keyvalue.Put(cacheKey, previewImage)
+	if err != nil {
+		return nil
+	}
+
+	log.Infof("Attachment image preview for task attachment %v of size %v created and cached", ta.ID, previewSize)
+
+	return previewImage
+}
+
 // Delete removes an attachment
 // @Summary Delete an attachment
 // @Description Delete an attachment.

pkg/routes/api/v1/task_attachment.go

@@ -18,12 +18,14 @@ package v1
 
 import (
 	"net/http"
+	"strings"
 
 	"code.vikunja.io/api/pkg/db"
-
+	"code.vikunja.io/api/pkg/log"
 	"code.vikunja.io/api/pkg/models"
 	auth2 "code.vikunja.io/api/pkg/modules/auth"
 	"code.vikunja.io/web/handler"
+
 	"github.com/labstack/echo/v4"
 )
 
@@ -115,6 +117,8 @@ func UploadTaskAttachment(c echo.Context) error {
 // @Produce octet-stream
 // @Param id path int true "Task ID"
 // @Param attachmentID path int true "Attachment ID"
+// @Param preview query string false "If set to true, a preview image will be returned if the attachment is an image."
+// @Param size query string false "The size of the preview image. Can be sm = 100px, md = 200px, lg = 400px or xl = 800px."
 // @Security JWTKeyAuth
 // @Success 200 {file} blob "The attachment file."
 // @Failure 403 {object} models.Message "No access to this task."
@@ -153,6 +157,23 @@ func GetTaskAttachment(c echo.Context) error {
 		return handler.HandleHTTPError(err, c)
 	}
 
+	// Reading the 'preview' query parameter
+	preview := c.QueryParam("preview") == "true"
+	previewSize := models.PreviewSize(c.QueryParam("size"))
+	if previewSize == "" {
+		previewSize = models.PreviewMedium
+	}
+
+	// If the preview query parameter is set and the preview was already generated and cached, return the cached preview image
+	if preview && strings.HasPrefix(taskAttachment.File.Mime, "image") {
+		previewFileBytes := taskAttachment.GetPreviewFromCache(previewSize)
+		if previewFileBytes != nil {
+			log.Debugf("Cached attachment image preview found for task attachment %v", taskAttachment.ID)
+
+			return c.Blob(http.StatusOK, "image/png", previewFileBytes)
+		}
+	}
+
 	// Open an send the file to the client
 	err = taskAttachment.File.LoadFileByID()
 	if err != nil {
@@ -165,6 +186,14 @@ func GetTaskAttachment(c echo.Context) error {
 		return handler.HandleHTTPError(err, c)
 	}
 
+	// If a preview is requested and the preview was not cached, we create the preview and cache it
+	if preview {
+		previewFileBytes := taskAttachment.GenerateAndSavePreviewToCache(previewSize)
+		if previewFileBytes != nil {
+			return c.Blob(http.StatusOK, "image/png", previewFileBytes)
+		}
+	}
+
 	http.ServeContent(c.Response(), c.Request(), taskAttachment.File.Name, taskAttachment.File.Created, taskAttachment.File.File)
 	return nil
 }