Idea: blurhash and humbhash auto generated for images

[austriker27]

From what I can tell, the thumbhash (and blurhash) must be provided a string. It would be a great feature if this was generated automatically either server or client side. (Similar to what Gatsby Image did years ago)

Thanks!

[johannschopplich]

Good idea in general. Although, unlazy is intended as a client-first library at the moment. Only the Nuxt module has meta-framework context and would be able to convert an image into a hash.

A better fit is probably to find a way to include unlazy into the Nuxt Image module, respectively the to-go solution in the Next.js world (which I'm not familiar with).

[chrisspiegl]

I have achieved something similar to this by wraping the UnLazyImage component in my own component and using @Nuxt/Image to do the image rendering.

In this particular code example, I am not having it render the Thumbhash but instead using the @Nuxt/Image component to replace the domain names and creating the srcset for multiple sizes while providing resizing options through IPX.

In a similar way, you may be able to integrate the Thumbhash server side generation by doing something like the code provided below which is my server side function code to generate a Thumbhash from a uploaded image in this case.

Custom Image Component to do stuff between NiyamaImage & UnLazyImage

<script setup lang="ts">
import type { ImageModifiers, ImageSizes } from '@nuxt/image';
import { consola } from 'consola';
import type { BlurHashObject } from '~~/types/database';

const { src, sizes, preset, densities, provider, modifiers, thumbhash, blurhash, preload, lazyLoad } = withDefaults(defineProps<{
  src?: string
  preload?: boolean
  lazyLoad?: boolean
  preset?: string
  densities?: string
  provider?: string
  modifiers?: Partial<ImageModifiers>
  sizes?: string
  thumbhash?: string
  blurhash?: BlurHashObject
  ssr?: boolean
}>(), {
  ssr: true,
})

const logger = consola.withTag('Component/NiyamaImage')
// logger.debug('🛠️ Setup')

const img = useImage()
const presets = img.options.presets

const _srcset = computedEager(() => {
  const _preset = preset ? presets[preset] : undefined
  const _sizes = (!sizes && _preset) ? _preset?.sizes : sizes
  const _modifiers = (!modifiers && _preset) ? _preset.modifiers : modifiers
  if (!src) {
    return {
      srcset: '',
      sizes: '',
      src: '',
    } as ImageSizes
  }
  return img.getSizes(src, {
    sizes: _sizes,
    modifiers: _modifiers,
    preset,
    densities,
    provider,
  }, _sizes)
})

const _blurhash = computedEager(() => ({
  hash: blurhash?.hash || '',
  size: blurhash?.width || 0,
  ratio: blurhashRatio(blurhash) || 1,
}))
</script>

<template>
  <UnLazyImage
    :key="_srcset.src || src"
    :src="_srcset.src || src"
    :src-set="_srcset.srcset"
    :sizes="_srcset.sizes"
    :thumbhash="thumbhash"
    :blurhash="_blurhash.hash"
    :placeholder-size="_blurhash.size"
    :placeholder-ratio="_blurhash.ratio"
    :selectable="false"
    :draggable="false"
    :preload="preload || false"
    :loading="lazyLoad ? 'lazy' : ''"
    :ssr="ssr"
  />
</template>

Custom Function to Generate Thumbhash

This code would obviously have to be wrapped to only execute on the server.

import { Buffer } from 'node:buffer'
import { createCanvas, loadImage } from '@napi-rs/canvas'
import { rgbaToThumbHash } from 'thumbhash'

export async function generateThumbhash(bufferBody, maxSize = 100) {
  const image = await loadImage(bufferBody)
  const { width, height } = image
  const scale = Math.min(maxSize / width, maxSize / height)
  const resizedWidth = Math.floor(width * scale)
  const resizedHeight = Math.floor(height * scale)

  const canvas = createCanvas(resizedWidth, resizedHeight)
  const context = canvas.getContext('2d')
  context.drawImage(image, 0, 0, resizedWidth, resizedHeight)

  const imageData = context.getImageData(0, 0, resizedWidth, resizedHeight)
  const rgba = new Uint8Array(imageData.data.buffer)
  const binaryThumbHash = rgbaToThumbHash(imageData.width, imageData.height, rgba)

  return {
    hash: Buffer.from(binaryThumbHash).toString('base64'),
    width: imageData.width,
    height: imageData.height,
  }
}

[johannschopplich]

That looks promising! We could implement that for the Nuxt UnLazy integration (is this possible without Nuxt Image and directly using IPX)?, as it's the only SSR framework integration for now. PR welcome! ⚡

[chrisspiegl]

IPX is available individually and can be integrated by itself.

However, there is a bunch of trickery going on in the @nuxt/image library which makes it a module for Nuxt and thus also possible to run the image resizer directly in the Nuxt Server API.

However, the code that renders the Thumbhash on the server has nothing todo with @nuxt/image and could be implemented completely standalone.

Also, I do have a second function which generates Blurhash images. I just don't use that myself any more since we decided to go with Thumbhash from here on out.

[johannschopplich]

Indeed, but using IPX standalone is quite tricky. At least in my experience. 😄 We also could conditionally use Nuxt Image if available.
The ThumbHash and BlurHash generation logic would be a great addition to the unlazy core. 👍

[chrisspiegl]

That's true with IPX. I think there is a great in between spot though:

• Implement IPX for
  • automatic url generating for the different cloud image resizing providers with presets.
• Relying on @nuxt/image
  • for the "in built IPX server" nuxt module.

This would yield the possibility to use IPX for all the cloud providers and if one really wants to use the IPX resizing server on their own function, then they can use @nuxt/image module.

I personally for example am using the @nuxt/image in my Nuxt app only for the url generating stuff. But then I run my own IPX-Server-Function which I use for multiple projects (with a bigger RAM etc).

My Implementations (pulled together from different gist and github resources):

These two functions render the blurhash and thumbhash from a image buffer. As far as I know these are pretty performant implementations using the the @napi-rs/canvas.

import { Buffer } from 'node:buffer'
import { createCanvas, loadImage } from '@napi-rs/canvas'
import { rgbaToThumbHash } from 'thumbhash'
import { encode as rgbaToBlurhash } from 'blurhash'

export async function generateBlurhash(bufferBody, maxSize = 100) {
  const image = await loadImage(bufferBody)
  const { width, height } = image
  const scale = Math.min(maxSize / width, maxSize / height)
  const resizedWidth = Math.floor(width * scale)
  const resizedHeight = Math.floor(height * scale)

  const canvas = createCanvas(resizedWidth, resizedHeight)
  const context = canvas.getContext('2d')
  context.drawImage(image, 0, 0, resizedWidth, resizedHeight)

  const imageData = context.getImageData(0, 0, resizedWidth, resizedHeight)
  const binaryThumbHash = rgbaToBlurhash(imageData.data, imageData.width, imageData.height, 4, 4)

  return {
    hash: binaryThumbHash,
    width: imageData.width,
    height: imageData.height,
  }
}

export async function generateThumbhash(bufferBody, maxSize = 100) {
  const image = await loadImage(bufferBody)
  const { width, height } = image
  const scale = Math.min(maxSize / width, maxSize / height)
  const resizedWidth = Math.floor(width * scale)
  const resizedHeight = Math.floor(height * scale)

  const canvas = createCanvas(resizedWidth, resizedHeight)
  const context = canvas.getContext('2d')
  context.drawImage(image, 0, 0, resizedWidth, resizedHeight)

  const imageData = context.getImageData(0, 0, resizedWidth, resizedHeight)
  const rgba = new Uint8Array(imageData.data.buffer)
  const binaryThumbHash = rgbaToThumbHash(imageData.width, imageData.height, rgba)

  return {
    hash: Buffer.from(binaryThumbHash).toString('base64'),
    width: imageData.width,
    height: imageData.height,
  }
}