BlurHash
A photo as a short BlurHash, shown blurred while the real one loads, and back as a small PNG data URL.
Version 1.0.0 · 2 functions · 3 crates
Functions
What use blurhash.qwer gives a program, with the types Quillo sees. To take only some, or under other names: use blurhash_of, blurhash_data_url from blurhash (Quillo 0.6).
blurhash_of(path: str) → stror an errorThe BlurHash of the image at path (JPEG, PNG, WebP or GIF), with 4 by 3 components: store it beside the photo.
blurhash_data_url(hash: str, width: int, height: int) → stror an errorA small PNG of a BlurHash, as a data: URL for an <img> or a CSS background: width by height pixels (32 by 32 is plenty; CSS scales it).
Get it
$ quillo install blurhash # blurhash.qwer into this folder$ quillo install blurhash --example # and its example, blurhash.qweOr with curl:
$ curl -O https://quillolang.org/plugins/files/blurhash.qwer$ curl -O https://quillolang.org/plugins/files/blurhash.qwe$ curl -O https://quillolang.org/plugins/files/sample.jpgThen, in your program, all of it or only what you call:
use blurhash.qweruse blurhash_of, blurhash_data_url from blurhash // Quillo 0.6: only theseIt uses these crates, which cargo fetches the first time the plugin is built:
blurhash = "0.2"image = { version = "0.25", default-features = false, features = ["jpeg", "png", "webp", "gif"] }base64 = "0.22"Example
// A photo that shows blurred until it has loaded.//// quillo run blurhash.qwe then open http://localhost:8080/ (sample.jpg beside it)use "blurhash.qwer"let hash = blurhash_of("sample.jpg")?route GET /sample.jpg = file("sample.jpg")route GET /hash = { hash }route GET / = <html><body> <img src="/sample.jpg" width="480" height="252" alt="The Quillo banner" style={`background: url(${blurhash_data_url(hash, 32, 17)?}) center / cover`}/></body></html>$ quillo run blurhash.qwe$ curl 'localhost:8080/hash'$ curl 'localhost:8080/'Source
//! BlurHash placeholders: a photo as 20-odd characters that a page shows blurred while the real one loads.//! version: 1.0.0//!//! [dependencies]//! blurhash = "0.2"//! image = { version = "0.25", default-features = false, features = ["jpeg", "png", "webp", "gif"] }//! base64 = "0.22"use base64::engine::general_purpose::STANDARD;use base64::Engine;/// The BlurHash of the image at `path` (JPEG, PNG, WebP or GIF), with 4 by 3 components: store it beside the photo.pub fn blurhash_of(path: &str) -> Result<String, String> { let img = image::open(path).map_err(|e| format!("{}: {}", path, e))?.thumbnail(64, 64).to_rgba8(); blurhash::encode(4, 3, img.width(), img.height(), img.as_raw()).map_err(|e| format!("{:?}", e))}/// A small PNG of a BlurHash, as a `data:` URL for an `<img>` or a CSS background: `width` by `height` pixels (32 by 32 is plenty; CSS scales it).pub fn blurhash_data_url(hash: &str, width: i64, height: i64) -> Result<String, String> { let (w, h) = (width.clamp(4, 256) as u32, height.clamp(4, 256) as u32); let pixels = blurhash::decode(hash, w, h, 1.0).map_err(|e| format!("{:?}", e))?; let img = image::RgbaImage::from_raw(w, h, pixels).ok_or("the hash did not decode")?; let mut png = std::io::Cursor::new(Vec::new()); img.write_to(&mut png, image::ImageFormat::Png).map_err(|e| e.to_string())?; Ok(format!("data:image/png;base64,{}", STANDARD.encode(png.into_inner())))}Related
thumbhash.qwer · 1.0.0ThumbHash placeholders: a photo as about 25 bytes to keep with it, shown as a soft preview while it loads, finer than BlurHash and with the photo's aspect ratio, average colour and transparency inside.7 views · 9 downloadsAnimated GIF gif.qwer · 1.0.0Animated GIFs made from a list of pictures with the delay and size you choose, and GIFs read back: frames, size and length.6 views · 7 downloadsASCII art ascii_art.qwer · 1.0.0Pictures turned into ASCII art: characters from light to dark, plain for terminals and emails, or coloured as HTML.6 views · 10 downloadsBarcodes barcode.qwer · 1.0.0EAN-13, EAN-8, UPC-A, Code 128 and Code 39 barcodes as SVG or PNG, with the digits underneath and check digits worked out.6 views · 5 downloadsCaptions on images caption.qwer · 1.0.0Text drawn on pictures with a built-in font: captions at the top, middle or bottom, wrapped to fit, with an outline or a band behind them, meme-style top and bottom lines, and text measured before drawing.7 views · 7 downloadsCollage collage.qwer · 1.0.0Several pictures made into one: a grid of equal cells with gaps, or justified rows that keep each picture's shape, on your background.7 views · 7 downloadsThread 0 posts
On BlurHash: questions, tips, corrections, and code that uses it.
No posts yet. The first one opens the thread.