Skip to content

.NET implementation of ThumbHash: a very compact representation of a placeholder for an image. Store it inline with your data and show it while the real image is loading for a smoother loading experience.

License

Notifications You must be signed in to change notification settings

jzebedee/ThumbHash

Repository files navigation

ThumbHash nuget package CI build-test-pack

This library is a .NET implementation of ThumbHash.

What is a thumbhash?

A very compact representation of a placeholder for an image. Store it inline with your data and show it while the real image is loading for a smoother loading experience.

Image ThumbHash ThumbHash Image
Flower 93 4A 06 2D 06 92 56 C3 74 05 58 67 DA 8A B6 67 94 90 51 07 19 Flower ThumbHash
Tux A1 19 8A 1C 02 38 3A 25 D7 27 F6 8B 97 1F F7 F9 71 7F 80 37 67 58 98 79 06 Tux ThumbHash

See a demo of ThumbHash for .NET in Blazor here

Learn more about ThumbHashes here.

Usage

The ThumbHash library has no external dependencies and can be used on its own, or with your choice of image library (e.g., SkiaSharp, ImageSharp) for rendering.

Images must be in the format of unpremultiplied RGBA8888 before working with ThumbHash.

Convert an image into a thumbhash (SkiaSharp)

using SkiaSharp;
using ThumbHashes;

using var original = SKBitmap.Decode("original.png");
using var rgba8888 = original.Copy(SKColorType.Rgba8888);
var thumbhash = ThumbHash.FromImage(rgba8888.Width, rgba8888.Height, rgba8888.GetPixelSpan());

Load a thumbhash and render it to RGBA

using ThumbHashes;

byte[] hash = Convert.FromHexString("934A062D069256C374055867DA8AB6679490510719");
var thumbhash = new ThumbHash(hash);

var (width, height, rgba) = thumbhash.ToImage();

Save a rendered RGBA to a PNG (SkiaSharp)

using SkiaSharp;

var (width, height, rgba) = thumbhash.ToImage();
var image_info = new SKImageInfo(width, height, SKColorType.Rgba8888, SKAlphaType.Unpremul);
using var sk_img = SKImage.FromPixelCopy(image_info, rgba);
using var sk_png_data = sk_img.Encode(SKEncodedImageFormat.Png, 100);

using var fs_png = System.IO.File.Create("test.png");
sk_png_data.SaveTo(fs_png);

Save a ThumbHash to a PNG data url (no dependencies)

string dataUrl = thumbhash.ToDataUrl();
<img src="@dataUrl" />

Support

Discord

Discussion and technical support is available on Discord.

About

.NET implementation of ThumbHash: a very compact representation of a placeholder for an image. Store it inline with your data and show it while the real image is loading for a smoother loading experience.

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages