Feat: Allow generating base64 image string

[ShivamJoker]

It would be great to have the ability to generate base64 string which can be used in the image src directly.

Eg data:image/webp;base64,UklGRlIAAABXRUJQVlA4IEYAAACwAQCdASoEAAQAAUAmJQBOgCHfFPUAAP76o/ZQ5cVKv//aDeITqchzAx/i1Kcg6X9b/orzvs6JRg6h/yOfhkNTG+tTwAAA

[lxsmnsyc]

Hmmm, I've never really considered this, probably because:

• for rollup, there are plugins that can inline image URLs into base64 output.
• for post-processing, one can just encode the blurhash output into a Buffer then output it as base64
  I'm not sure what other things there is to give this a reasonable implementation

[ShivamJoker]

I am not sure those plugins will generate a blurred version of image.

one can just encode the blurhash output into a Buffer then output it as base64

If you can explain bit more on how to achieve I would like to send a PR

[ShivamJoker]

We will get a buffer here, if I am not wrong

const imageData = await blurhash.decode(hash, width, height, punch);

I am not sure if we just encode and add the data:image/webp;base64, it will work

[lxsmnsyc]

I am not sure those plugins will generate a blurred version of image.

one can just encode the blurhash output into a Buffer then output it as base64

If you can explain bit more on how to achieve I would like to send a PR

uhh, the rollup plugin of blurhash-as already generates the blurhash placeholder as an image (jpeg/png), it also has other info. You do know this, right? All of the demos are using that plugin.

There's no PR necessary.

For image processing using decode, you can use the sharp image processing library and pass the decoded result to sharp.

Here's an example:

async function decode(request: Decode): Promise<sharp.Sharp> {
  const aspectRatio = getAspectRatio(request.query);
  const correctRatio = getNearestAspectRatio(aspectRatio);
  const decodedBytes = await blurhash.decode(
    request.query.hash,
    correctRatio.width * SCALE,
    correctRatio.height * SCALE,
  );
  return sharp(Buffer.from(decodedBytes), {
    raw: {
      width: correctRatio.width * SCALE,
      height: correctRatio.height * SCALE,
      channels: 4,
    },
  });
}

sharp provides ways to convert into different formats, you can then encode it into a Buffer and then convert that Buffer into base64 (Buffer already has a built-in way to do this).

[ShivamJoker]

Oh I see. The rolup plugin should work with .astro files as well.

So if I am importing any local images with ?blurhash=jpg It will give me blurred version of the image?

But in the docs it says it only supports jpg and png but I have my images in webp, can we add webp support as well?

[ShivamJoker]

I do see webp support though

      if (/\.(png|jpg|webp)\?blurhash=webp/.test(id)) {

https://github.com/lxsmnsyc/blurhash-as/blob/main/packages/rollup-plugin-blurhash-as/src/index.ts#L135

[ShivamJoker]

I just can't get the plugin to work I keep getting

/node_modules/.pnpm/[email protected]/node_modules/rollup-plugin-blurhash-as/dist/esm/production/index.js:1

SyntaxError: Cannot use import statement outside a module
    at compileFunction (<anonymous>)

Config .mjs

import { defineConfig } from "astro/config";
import tailwind from "@astrojs/tailwind";
import sitemap from "@astrojs/sitemap";
import preact from "@astrojs/preact";
import * as blurhash from "rollup-plugin-blurhash-as";
import image from "@astrojs/image";

// https://astro.build/config
export default defineConfig({
  site: "https://introvert-test.com",
  integrations: [tailwind(), sitemap(), preact(), image()],
  vite: {
    plugins: [
      {
        ...blurhash(),
        enforce: "pre",
      },
    ],
  },
});

Already tried the cjs version

[lxsmnsyc]

the format refers to the blurhash output, not the actual source file. For source images you can use either webp, png or jpeg.

For using in an mjs file, I'll probably release fix. If you wanted to I might make the image processing as an open-source library.

[ShivamJoker]

the format refers to the blurhash output, not the actual source file. For source images you can use either webp, png or jpeg.
I am using webp only thank!

It would be great to have the plugin fixed for mjs files as well.

And yes I would love to see the processing library as well.

[ShivamJoker]

@lxsmnsyc any updates on this?

[lxsmnsyc]

Since I have been caught in more important work, I haven't had a time to work on this yet, but I can probably release the update this week.

[ShivamJoker]

sure no problem even if I get this lib as API it would be great