We could try to resize on demand, but that means we would have to generate the preview as we scroll.
|
async resizeImageWithCanvas(image: HTMLImageElement): Promise<string|null> { |
|
return new Promise((resolve) => { |
|
const width = image.width |
|
const height = image.height |
|
|
|
// Calc scale up factor |
|
const f = height < width ? PREVIEW_SIZE / height : PREVIEW_SIZE / width |
|
|
|
try { |
|
// Create your canvas |
|
const canvas = document.createElement('canvas') |
|
canvas.height = canvas.width = PREVIEW_SIZE |
|
const ctx = canvas.getContext('2d') |
|
const posX = (width * f - PREVIEW_SIZE) / 2 * -1 |
|
const posY = (height * f - PREVIEW_SIZE) / 2 * -1 |
|
ctx.drawImage(image, posX, posY, width * f, height * f) |
|
|
|
canvas.toBlob((blob) => { |
|
const url = URL.createObjectURL(blob) |
|
resolve(url) |
|
}) |
|
} catch (e) { |
|
resolve(null) |
|
} |
|
}) |
Maybe using onload to fetchThePreview so that it gets replaced as we scroll with the lazy loading?
Or use an intersectObserver and trigger the preview Fetch 🤷
